@shopify/react-native-skia 1.9.1 → 1.10.1

package/lib/module/sksg/Recorder/commands/Paint.js.map

@@ -1 +1 @@
-{"version":3,"names":["enumKey","BlendMode","PaintStyle","StrokeCap","StrokeJoin","processColor","Skia","color","Color","Array","isArray","Float32Array","Error","setPaintProperties","paint","opacity","blendMode","strokeWidth","style","strokeJoin","strokeCap","strokeMiter","antiAlias","dither","undefined","setAlphaf","getAlphaf","currentOpacity","setShader","setColor","setBlendMode","setStrokeWidth","setStyle","setStrokeJoin","setStrokeCap","setStrokeMiter","setAntiAlias","setDither"],"sources":["Paint.ts"],"sourcesContent":["import { enumKey } from \"../../../dom/nodes\";\nimport type { PaintProps } from \"../../../dom/types\";\nimport {\n  BlendMode,\n  PaintStyle,\n  StrokeCap,\n  StrokeJoin,\n} from \"../../../skia/types\";\nimport type { SkPaint, Skia } from \"../../../skia/types\";\n\nexport const processColor = (\n  Skia: Skia,\n  color: number | string | Float32Array | number[]\n) => {\n  \"worklet\";\n  if (typeof color === \"string\" || typeof color === \"number\") {\n    return Skia.Color(color);\n  } else if (Array.isArray(color) || color instanceof Float32Array) {\n    return color instanceof Float32Array ? color : new Float32Array(color);\n  } else {\n    throw new Error(\n      `Invalid color type: ${typeof color}. Expected number, string, or array.`\n    );\n  }\n};\n\nexport const setPaintProperties = (\n  Skia: Skia,\n  paint: SkPaint,\n  {\n    opacity,\n    color,\n    blendMode,\n    strokeWidth,\n    style,\n    strokeJoin,\n    strokeCap,\n    strokeMiter,\n    antiAlias,\n    dither,\n  }: PaintProps\n) => {\n  \"worklet\";\n  if (opacity !== undefined) {\n    paint.setAlphaf(paint.getAlphaf() * opacity);\n  }\n  if (color !== undefined) {\n    const currentOpacity = paint.getAlphaf();\n    paint.setShader(null);\n    paint.setColor(processColor(Skia, color));\n    paint.setAlphaf(currentOpacity * paint.getAlphaf());\n  }\n  if (blendMode !== undefined) {\n    paint.setBlendMode(BlendMode[enumKey(blendMode)]);\n  }\n  if (strokeWidth !== undefined) {\n    paint.setStrokeWidth(strokeWidth);\n  }\n  if (style !== undefined) {\n    paint.setStyle(PaintStyle[enumKey(style)]);\n  }\n  if (strokeJoin !== undefined) {\n    paint.setStrokeJoin(StrokeJoin[enumKey(strokeJoin)]);\n  }\n  if (strokeCap !== undefined) {\n    paint.setStrokeCap(StrokeCap[enumKey(strokeCap)]);\n  }\n  if (strokeMiter !== undefined) {\n    paint.setStrokeMiter(strokeMiter);\n  }\n  if (antiAlias !== undefined) {\n    paint.setAntiAlias(antiAlias);\n  }\n  if (dither !== undefined) {\n    paint.setDither(dither);\n  }\n};\n"],"mappings":"AAAA,SAASA,OAAO,QAAQ,oBAAoB;AAE5C,SACEC,SAAS,EACTC,UAAU,EACVC,SAAS,EACTC,UAAU,QACL,qBAAqB;AAG5B,OAAO,MAAMC,YAAY,GAAGA,CAC1BC,IAAU,EACVC,KAAgD,KAC7C;EACH,SAAS;;EACT,IAAI,OAAOA,KAAK,KAAK,QAAQ,IAAI,OAAOA,KAAK,KAAK,QAAQ,EAAE;IAC1D,OAAOD,IAAI,CAACE,KAAK,CAACD,KAAK,CAAC;EAC1B,CAAC,MAAM,IAAIE,KAAK,CAACC,OAAO,CAACH,KAAK,CAAC,IAAIA,KAAK,YAAYI,YAAY,EAAE;IAChE,OAAOJ,KAAK,YAAYI,YAAY,GAAGJ,KAAK,GAAG,IAAII,YAAY,CAACJ,KAAK,CAAC;EACxE,CAAC,MAAM;IACL,MAAM,IAAIK,KAAK,CACb,uBAAuB,OAAOL,KAAK,sCACrC,CAAC;EACH;AACF,CAAC;AAED,OAAO,MAAMM,kBAAkB,GAAGA,CAChCP,IAAU,EACVQ,KAAc,EACd;EACEC,OAAO;EACPR,KAAK;EACLS,SAAS;EACTC,WAAW;EACXC,KAAK;EACLC,UAAU;EACVC,SAAS;EACTC,WAAW;EACXC,SAAS;EACTC;AACU,CAAC,KACV;EACH,SAAS;;EACT,IAAIR,OAAO,KAAKS,SAAS,EAAE;IACzBV,KAAK,CAACW,SAAS,CAACX,KAAK,CAACY,SAAS,CAAC,CAAC,GAAGX,OAAO,CAAC;EAC9C;EACA,IAAIR,KAAK,KAAKiB,SAAS,EAAE;IACvB,MAAMG,cAAc,GAAGb,KAAK,CAACY,SAAS,CAAC,CAAC;IACxCZ,KAAK,CAACc,SAAS,CAAC,IAAI,CAAC;IACrBd,KAAK,CAACe,QAAQ,CAACxB,YAAY,CAACC,IAAI,EAAEC,KAAK,CAAC,CAAC;IACzCO,KAAK,CAACW,SAAS,CAACE,cAAc,GAAGb,KAAK,CAACY,SAAS,CAAC,CAAC,CAAC;EACrD;EACA,IAAIV,SAAS,KAAKQ,SAAS,EAAE;IAC3BV,KAAK,CAACgB,YAAY,CAAC7B,SAAS,CAACD,OAAO,CAACgB,SAAS,CAAC,CAAC,CAAC;EACnD;EACA,IAAIC,WAAW,KAAKO,SAAS,EAAE;IAC7BV,KAAK,CAACiB,cAAc,CAACd,WAAW,CAAC;EACnC;EACA,IAAIC,KAAK,KAAKM,SAAS,EAAE;IACvBV,KAAK,CAACkB,QAAQ,CAAC9B,UAAU,CAACF,OAAO,CAACkB,KAAK,CAAC,CAAC,CAAC;EAC5C;EACA,IAAIC,UAAU,KAAKK,SAAS,EAAE;IAC5BV,KAAK,CAACmB,aAAa,CAAC7B,UAAU,CAACJ,OAAO,CAACmB,UAAU,CAAC,CAAC,CAAC;EACtD;EACA,IAAIC,SAAS,KAAKI,SAAS,EAAE;IAC3BV,KAAK,CAACoB,YAAY,CAAC/B,SAAS,CAACH,OAAO,CAACoB,SAAS,CAAC,CAAC,CAAC;EACnD;EACA,IAAIC,WAAW,KAAKG,SAAS,EAAE;IAC7BV,KAAK,CAACqB,cAAc,CAACd,WAAW,CAAC;EACnC;EACA,IAAIC,SAAS,KAAKE,SAAS,EAAE;IAC3BV,KAAK,CAACsB,YAAY,CAACd,SAAS,CAAC;EAC/B;EACA,IAAIC,MAAM,KAAKC,SAAS,EAAE;IACxBV,KAAK,CAACuB,SAAS,CAACd,MAAM,CAAC;EACzB;AACF,CAAC","ignoreList":[]}
+{"version":3,"names":["enumKey","processColor","BlendMode","PaintStyle","StrokeCap","StrokeJoin","setPaintProperties","Skia","paint","opacity","color","blendMode","strokeWidth","style","strokeJoin","strokeCap","strokeMiter","antiAlias","dither","undefined","setAlphaf","getAlphaf","currentOpacity","setShader","setColor","setBlendMode","setStrokeWidth","setStyle","setStrokeJoin","setStrokeCap","setStrokeMiter","setAntiAlias","setDither"],"sources":["Paint.ts"],"sourcesContent":["import { enumKey, processColor } from \"../../../dom/nodes\";\nimport type { PaintProps } from \"../../../dom/types\";\nimport {\n  BlendMode,\n  PaintStyle,\n  StrokeCap,\n  StrokeJoin,\n} from \"../../../skia/types\";\nimport type { SkPaint, Skia } from \"../../../skia/types\";\n\nexport const setPaintProperties = (\n  Skia: Skia,\n  paint: SkPaint,\n  {\n    opacity,\n    color,\n    blendMode,\n    strokeWidth,\n    style,\n    strokeJoin,\n    strokeCap,\n    strokeMiter,\n    antiAlias,\n    dither,\n  }: PaintProps\n) => {\n  \"worklet\";\n  if (opacity !== undefined) {\n    paint.setAlphaf(paint.getAlphaf() * opacity);\n  }\n  if (color !== undefined) {\n    const currentOpacity = paint.getAlphaf();\n    paint.setShader(null);\n    paint.setColor(processColor(Skia, color));\n    paint.setAlphaf(currentOpacity * paint.getAlphaf());\n  }\n  if (blendMode !== undefined) {\n    paint.setBlendMode(BlendMode[enumKey(blendMode)]);\n  }\n  if (strokeWidth !== undefined) {\n    paint.setStrokeWidth(strokeWidth);\n  }\n  if (style !== undefined) {\n    paint.setStyle(PaintStyle[enumKey(style)]);\n  }\n  if (strokeJoin !== undefined) {\n    paint.setStrokeJoin(StrokeJoin[enumKey(strokeJoin)]);\n  }\n  if (strokeCap !== undefined) {\n    paint.setStrokeCap(StrokeCap[enumKey(strokeCap)]);\n  }\n  if (strokeMiter !== undefined) {\n    paint.setStrokeMiter(strokeMiter);\n  }\n  if (antiAlias !== undefined) {\n    paint.setAntiAlias(antiAlias);\n  }\n  if (dither !== undefined) {\n    paint.setDither(dither);\n  }\n};\n"],"mappings":"AAAA,SAASA,OAAO,EAAEC,YAAY,QAAQ,oBAAoB;AAE1D,SACEC,SAAS,EACTC,UAAU,EACVC,SAAS,EACTC,UAAU,QACL,qBAAqB;AAG5B,OAAO,MAAMC,kBAAkB,GAAGA,CAChCC,IAAU,EACVC,KAAc,EACd;EACEC,OAAO;EACPC,KAAK;EACLC,SAAS;EACTC,WAAW;EACXC,KAAK;EACLC,UAAU;EACVC,SAAS;EACTC,WAAW;EACXC,SAAS;EACTC;AACU,CAAC,KACV;EACH,SAAS;;EACT,IAAIT,OAAO,KAAKU,SAAS,EAAE;IACzBX,KAAK,CAACY,SAAS,CAACZ,KAAK,CAACa,SAAS,CAAC,CAAC,GAAGZ,OAAO,CAAC;EAC9C;EACA,IAAIC,KAAK,KAAKS,SAAS,EAAE;IACvB,MAAMG,cAAc,GAAGd,KAAK,CAACa,SAAS,CAAC,CAAC;IACxCb,KAAK,CAACe,SAAS,CAAC,IAAI,CAAC;IACrBf,KAAK,CAACgB,QAAQ,CAACvB,YAAY,CAACM,IAAI,EAAEG,KAAK,CAAC,CAAC;IACzCF,KAAK,CAACY,SAAS,CAACE,cAAc,GAAGd,KAAK,CAACa,SAAS,CAAC,CAAC,CAAC;EACrD;EACA,IAAIV,SAAS,KAAKQ,SAAS,EAAE;IAC3BX,KAAK,CAACiB,YAAY,CAACvB,SAAS,CAACF,OAAO,CAACW,SAAS,CAAC,CAAC,CAAC;EACnD;EACA,IAAIC,WAAW,KAAKO,SAAS,EAAE;IAC7BX,KAAK,CAACkB,cAAc,CAACd,WAAW,CAAC;EACnC;EACA,IAAIC,KAAK,KAAKM,SAAS,EAAE;IACvBX,KAAK,CAACmB,QAAQ,CAACxB,UAAU,CAACH,OAAO,CAACa,KAAK,CAAC,CAAC,CAAC;EAC5C;EACA,IAAIC,UAAU,KAAKK,SAAS,EAAE;IAC5BX,KAAK,CAACoB,aAAa,CAACvB,UAAU,CAACL,OAAO,CAACc,UAAU,CAAC,CAAC,CAAC;EACtD;EACA,IAAIC,SAAS,KAAKI,SAAS,EAAE;IAC3BX,KAAK,CAACqB,YAAY,CAACzB,SAAS,CAACJ,OAAO,CAACe,SAAS,CAAC,CAAC,CAAC;EACnD;EACA,IAAIC,WAAW,KAAKG,SAAS,EAAE;IAC7BX,KAAK,CAACsB,cAAc,CAACd,WAAW,CAAC;EACnC;EACA,IAAIC,SAAS,KAAKE,SAAS,EAAE;IAC3BX,KAAK,CAACuB,YAAY,CAACd,SAAS,CAAC;EAC/B;EACA,IAAIC,MAAM,KAAKC,SAAS,EAAE;IACxBX,KAAK,CAACwB,SAAS,CAACd,MAAM,CAAC;EACzB;AACF,CAAC","ignoreList":[]}

package/lib/module/sksg/Recorder/commands/Shaders.js

@@ -1,4 +1,4 @@
-import { enumKey, fitRects, getRect, processGradientProps, processTransformProps, rect2rect } from "../../../dom/nodes";
+import { enumKey, fitRects, getRect, processColor, processGradientProps, processTransformProps, rect2rect } from "../../../dom/nodes";
 import { NodeType } from "../../../dom/types";
 import { BlendMode, FilterMode, isCubicSampling, MipmapMode, processUniforms, TileMode } from "../../../skia/types";
 import { composeDeclarations } from "../../utils";
@@ -22,7 +22,7 @@ const declareColorShader = (ctx, props) => {
   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);
 };
 const declareFractalNoiseShader = (ctx, props) => {

package/lib/module/sksg/Recorder/commands/Shaders.js.map

@@ -1 +1 @@
-{"version":3,"names":["enumKey","fitRects","getRect","processGradientProps","processTransformProps","rect2rect","NodeType","BlendMode","FilterMode","isCubicSampling","MipmapMode","processUniforms","TileMode","composeDeclarations","CommandType","declareShader","ctx","props","source","uniforms","transform","m3","Skia","Matrix","shader","makeShaderWithChildren","shaders","splice","length","push","declareColorShader","color","Shader","MakeColor","Color","declareFractalNoiseShader","freqX","freqY","octaves","seed","tileWidth","tileHeight","MakeFractalNoise","declareTwoPointConicalGradientShader","startR","endR","start","end","colors","positions","mode","localMatrix","flags","MakeTwoPointConicalGradient","declareRadialGradientShader","c","r","MakeRadialGradient","declareSweepGradientShader","MakeSweepGradient","x","y","declareLinearGradientShader","MakeLinearGradient","declareTurbulenceShader","MakeTurbulence","declareImageShader","fit","image","tx","ty","sampling","imageShaderProps","rct","rects","width","height","sx","sy","src","dst","translate","translateX","translateY","scale","scaleX","scaleY","lm","concat","makeShaderCubic","B","C","_sampling$filter","_sampling$mipmap","filter","Linear","mipmap","None","declareBlend","blend","composer","MakeBlend","bind","isPushShader","command","type","PushShader","isShader","shaderType","pushShader","ImageShader","ColorShader","Turbulence","FractalNoise","LinearGradient","RadialGradient","SweepGradient","TwoPointConicalGradient","Blend","Error"],"sources":["Shaders.ts"],"sourcesContent":["import {\n  enumKey,\n  fitRects,\n  getRect,\n  processGradientProps,\n  processTransformProps,\n  rect2rect,\n} from \"../../../dom/nodes\";\nimport { NodeType } from \"../../../dom/types\";\nimport type {\n  BlendProps,\n  ColorProps,\n  FractalNoiseProps,\n  ImageShaderProps,\n  LinearGradientProps,\n  RadialGradientProps,\n  ShaderProps,\n  SweepGradientProps,\n  TurbulenceProps,\n  TwoPointConicalGradientProps,\n} from \"../../../dom/types\";\nimport type { SkShader } from \"../../../skia/types\";\nimport {\n  BlendMode,\n  FilterMode,\n  isCubicSampling,\n  MipmapMode,\n  processUniforms,\n  TileMode,\n} from \"../../../skia/types\";\nimport { composeDeclarations } from \"../../utils\";\nimport type { Command } from \"../Core\";\nimport { CommandType } from \"../Core\";\nimport type { DrawingContext } from \"../DrawingContext\";\n\nconst declareShader = (ctx: DrawingContext, props: ShaderProps) => {\n  \"worklet\";\n  const { source, uniforms, ...transform } = props;\n  const m3 = ctx.Skia.Matrix();\n  processTransformProps(m3, transform);\n  const shader = source.makeShaderWithChildren(\n    processUniforms(source, uniforms),\n    ctx.shaders.splice(0, ctx.shaders.length),\n    m3\n  );\n  ctx.shaders.push(shader);\n};\n\nconst declareColorShader = (ctx: DrawingContext, props: ColorProps) => {\n  \"worklet\";\n  const { color } = props;\n  const shader = ctx.Skia.Shader.MakeColor(ctx.Skia.Color(color));\n  ctx.shaders.push(shader);\n};\n\nconst declareFractalNoiseShader = (\n  ctx: DrawingContext,\n  props: FractalNoiseProps\n) => {\n  \"worklet\";\n  const { freqX, freqY, octaves, seed, tileWidth, tileHeight } = props;\n  const shader = ctx.Skia.Shader.MakeFractalNoise(\n    freqX,\n    freqY,\n    octaves,\n    seed,\n    tileWidth,\n    tileHeight\n  );\n  ctx.shaders.push(shader);\n};\n\nconst declareTwoPointConicalGradientShader = (\n  ctx: DrawingContext,\n  props: TwoPointConicalGradientProps\n) => {\n  \"worklet\";\n  const { startR, endR, start, end } = props;\n  const { colors, positions, mode, localMatrix, flags } = processGradientProps(\n    ctx.Skia,\n    props\n  );\n  const shader = ctx.Skia.Shader.MakeTwoPointConicalGradient(\n    start,\n    startR,\n    end,\n    endR,\n    colors,\n    positions,\n    mode,\n    localMatrix,\n    flags\n  );\n  ctx.shaders.push(shader);\n};\n\nconst declareRadialGradientShader = (\n  ctx: DrawingContext,\n  props: RadialGradientProps\n) => {\n  \"worklet\";\n  const { c, r } = props;\n  const { colors, positions, mode, localMatrix, flags } = processGradientProps(\n    ctx.Skia,\n    props\n  );\n  const shader = ctx.Skia.Shader.MakeRadialGradient(\n    c,\n    r,\n    colors,\n    positions,\n    mode,\n    localMatrix,\n    flags\n  );\n  ctx.shaders.push(shader);\n};\n\nconst declareSweepGradientShader = (\n  ctx: DrawingContext,\n  props: SweepGradientProps\n) => {\n  \"worklet\";\n  const { c, start, end } = props;\n  const { colors, positions, mode, localMatrix, flags } = processGradientProps(\n    ctx.Skia,\n    props\n  );\n  const shader = ctx.Skia.Shader.MakeSweepGradient(\n    c.x,\n    c.y,\n    colors,\n    positions,\n    mode,\n    localMatrix,\n    flags,\n    start,\n    end\n  );\n  ctx.shaders.push(shader);\n};\n\nconst declareLinearGradientShader = (\n  ctx: DrawingContext,\n  props: LinearGradientProps\n) => {\n  \"worklet\";\n  const { start, end } = props;\n  const { colors, positions, mode, localMatrix, flags } = processGradientProps(\n    ctx.Skia,\n    props\n  );\n  const shader = ctx.Skia.Shader.MakeLinearGradient(\n    start,\n    end,\n    colors,\n    positions ?? null,\n    mode,\n    localMatrix,\n    flags\n  );\n  ctx.shaders.push(shader);\n};\n\nconst declareTurbulenceShader = (\n  ctx: DrawingContext,\n  props: TurbulenceProps\n) => {\n  \"worklet\";\n  const { freqX, freqY, octaves, seed, tileWidth, tileHeight } = props;\n  const shader = ctx.Skia.Shader.MakeTurbulence(\n    freqX,\n    freqY,\n    octaves,\n    seed,\n    tileWidth,\n    tileHeight\n  );\n  ctx.shaders.push(shader);\n};\n\nconst declareImageShader = (ctx: DrawingContext, props: ImageShaderProps) => {\n  \"worklet\";\n  const { fit, image, tx, ty, sampling, ...imageShaderProps } = props;\n  if (!image) {\n    return;\n  }\n\n  const rct = getRect(ctx.Skia, imageShaderProps);\n  const m3 = ctx.Skia.Matrix();\n  if (rct) {\n    const rects = fitRects(\n      fit,\n      { x: 0, y: 0, width: image.width(), height: image.height() },\n      rct\n    );\n    const [x, y, sx, sy] = rect2rect(rects.src, rects.dst);\n    m3.translate(x.translateX, y.translateY);\n    m3.scale(sx.scaleX, sy.scaleY);\n  }\n  const lm = ctx.Skia.Matrix();\n  lm.concat(m3);\n  processTransformProps(lm, imageShaderProps);\n  let shader: SkShader;\n  if (sampling && isCubicSampling(sampling)) {\n    shader = image.makeShaderCubic(\n      TileMode[enumKey(tx)],\n      TileMode[enumKey(ty)],\n      sampling.B,\n      sampling.C,\n      lm\n    );\n  } else {\n    shader = image.makeShaderCubic(\n      TileMode[enumKey(tx)],\n      TileMode[enumKey(ty)],\n      sampling?.filter ?? FilterMode.Linear,\n      sampling?.mipmap ?? MipmapMode.None,\n      lm\n    );\n  }\n  ctx.shaders.push(shader);\n};\n\nconst declareBlend = (ctx: DrawingContext, props: BlendProps) => {\n  \"worklet\";\n  const blend = BlendMode[enumKey(props.mode as BlendProps[\"mode\"])];\n  const shaders = ctx.shaders.splice(0, ctx.shaders.length);\n  if (shaders.length > 0) {\n    const composer = ctx.Skia.Shader.MakeBlend.bind(ctx.Skia.Shader, blend);\n    ctx.shaders.push(composeDeclarations(shaders, composer));\n  }\n};\n\nexport const isPushShader = (\n  command: Command\n): command is Command<CommandType.PushShader> => {\n  \"worklet\";\n  return command.type === CommandType.PushShader;\n};\n\ntype Props = {\n  [NodeType.Shader]: ShaderProps;\n  [NodeType.ImageShader]: ImageShaderProps;\n  [NodeType.ColorShader]: ColorProps;\n  [NodeType.Turbulence]: TurbulenceProps;\n  [NodeType.FractalNoise]: FractalNoiseProps;\n  [NodeType.LinearGradient]: LinearGradientProps;\n  [NodeType.RadialGradient]: RadialGradientProps;\n  [NodeType.SweepGradient]: SweepGradientProps;\n  [NodeType.TwoPointConicalGradient]: TwoPointConicalGradientProps;\n  [NodeType.Blend]: BlendProps;\n};\n\ninterface PushShader<T extends keyof Props>\n  extends Command<CommandType.PushShader> {\n  shaderType: T;\n  props: Props[T];\n}\n\nconst isShader = <T extends keyof Props>(\n  command: Command<CommandType.PushShader>,\n  type: T\n): command is PushShader<T> => {\n  \"worklet\";\n  return command.shaderType === type;\n};\n\nexport const pushShader = (\n  ctx: DrawingContext,\n  command: Command<CommandType.PushShader>\n) => {\n  \"worklet\";\n  if (isShader(command, NodeType.Shader)) {\n    declareShader(ctx, command.props);\n  } else if (isShader(command, NodeType.ImageShader)) {\n    declareImageShader(ctx, command.props);\n  } else if (isShader(command, NodeType.ColorShader)) {\n    declareColorShader(ctx, command.props);\n  } else if (isShader(command, NodeType.Turbulence)) {\n    declareTurbulenceShader(ctx, command.props);\n  } else if (isShader(command, NodeType.FractalNoise)) {\n    declareFractalNoiseShader(ctx, command.props);\n  } else if (isShader(command, NodeType.LinearGradient)) {\n    declareLinearGradientShader(ctx, command.props);\n  } else if (isShader(command, NodeType.RadialGradient)) {\n    declareRadialGradientShader(ctx, command.props);\n  } else if (isShader(command, NodeType.SweepGradient)) {\n    declareSweepGradientShader(ctx, command.props);\n  } else if (isShader(command, NodeType.TwoPointConicalGradient)) {\n    declareTwoPointConicalGradientShader(ctx, command.props);\n  } else if (isShader(command, NodeType.Blend)) {\n    declareBlend(ctx, command.props);\n  } else {\n    throw new Error(`Unknown shader type: ${command.shaderType}`);\n  }\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["enumKey","fitRects","getRect","processColor","processGradientProps","processTransformProps","rect2rect","NodeType","BlendMode","FilterMode","isCubicSampling","MipmapMode","processUniforms","TileMode","composeDeclarations","CommandType","declareShader","ctx","props","source","uniforms","transform","m3","Skia","Matrix","shader","makeShaderWithChildren","shaders","splice","length","push","declareColorShader","color","Shader","MakeColor","declareFractalNoiseShader","freqX","freqY","octaves","seed","tileWidth","tileHeight","MakeFractalNoise","declareTwoPointConicalGradientShader","startR","endR","start","end","colors","positions","mode","localMatrix","flags","MakeTwoPointConicalGradient","declareRadialGradientShader","c","r","MakeRadialGradient","declareSweepGradientShader","MakeSweepGradient","x","y","declareLinearGradientShader","MakeLinearGradient","declareTurbulenceShader","MakeTurbulence","declareImageShader","fit","image","tx","ty","sampling","imageShaderProps","rct","rects","width","height","sx","sy","src","dst","translate","translateX","translateY","scale","scaleX","scaleY","lm","concat","makeShaderCubic","B","C","_sampling$filter","_sampling$mipmap","filter","Linear","mipmap","None","declareBlend","blend","composer","MakeBlend","bind","isPushShader","command","type","PushShader","isShader","shaderType","pushShader","ImageShader","ColorShader","Turbulence","FractalNoise","LinearGradient","RadialGradient","SweepGradient","TwoPointConicalGradient","Blend","Error"],"sources":["Shaders.ts"],"sourcesContent":["import {\n  enumKey,\n  fitRects,\n  getRect,\n  processColor,\n  processGradientProps,\n  processTransformProps,\n  rect2rect,\n} from \"../../../dom/nodes\";\nimport { NodeType } from \"../../../dom/types\";\nimport type {\n  BlendProps,\n  ColorProps,\n  FractalNoiseProps,\n  ImageShaderProps,\n  LinearGradientProps,\n  RadialGradientProps,\n  ShaderProps,\n  SweepGradientProps,\n  TurbulenceProps,\n  TwoPointConicalGradientProps,\n} from \"../../../dom/types\";\nimport type { SkShader } from \"../../../skia/types\";\nimport {\n  BlendMode,\n  FilterMode,\n  isCubicSampling,\n  MipmapMode,\n  processUniforms,\n  TileMode,\n} from \"../../../skia/types\";\nimport { composeDeclarations } from \"../../utils\";\nimport type { Command } from \"../Core\";\nimport { CommandType } from \"../Core\";\nimport type { DrawingContext } from \"../DrawingContext\";\n\nconst declareShader = (ctx: DrawingContext, props: ShaderProps) => {\n  \"worklet\";\n  const { source, uniforms, ...transform } = props;\n  const m3 = ctx.Skia.Matrix();\n  processTransformProps(m3, transform);\n  const shader = source.makeShaderWithChildren(\n    processUniforms(source, uniforms),\n    ctx.shaders.splice(0, ctx.shaders.length),\n    m3\n  );\n  ctx.shaders.push(shader);\n};\n\nconst declareColorShader = (ctx: DrawingContext, props: ColorProps) => {\n  \"worklet\";\n  const { color } = props;\n  const shader = ctx.Skia.Shader.MakeColor(processColor(ctx.Skia, color));\n  ctx.shaders.push(shader);\n};\n\nconst declareFractalNoiseShader = (\n  ctx: DrawingContext,\n  props: FractalNoiseProps\n) => {\n  \"worklet\";\n  const { freqX, freqY, octaves, seed, tileWidth, tileHeight } = props;\n  const shader = ctx.Skia.Shader.MakeFractalNoise(\n    freqX,\n    freqY,\n    octaves,\n    seed,\n    tileWidth,\n    tileHeight\n  );\n  ctx.shaders.push(shader);\n};\n\nconst declareTwoPointConicalGradientShader = (\n  ctx: DrawingContext,\n  props: TwoPointConicalGradientProps\n) => {\n  \"worklet\";\n  const { startR, endR, start, end } = props;\n  const { colors, positions, mode, localMatrix, flags } = processGradientProps(\n    ctx.Skia,\n    props\n  );\n  const shader = ctx.Skia.Shader.MakeTwoPointConicalGradient(\n    start,\n    startR,\n    end,\n    endR,\n    colors,\n    positions,\n    mode,\n    localMatrix,\n    flags\n  );\n  ctx.shaders.push(shader);\n};\n\nconst declareRadialGradientShader = (\n  ctx: DrawingContext,\n  props: RadialGradientProps\n) => {\n  \"worklet\";\n  const { c, r } = props;\n  const { colors, positions, mode, localMatrix, flags } = processGradientProps(\n    ctx.Skia,\n    props\n  );\n  const shader = ctx.Skia.Shader.MakeRadialGradient(\n    c,\n    r,\n    colors,\n    positions,\n    mode,\n    localMatrix,\n    flags\n  );\n  ctx.shaders.push(shader);\n};\n\nconst declareSweepGradientShader = (\n  ctx: DrawingContext,\n  props: SweepGradientProps\n) => {\n  \"worklet\";\n  const { c, start, end } = props;\n  const { colors, positions, mode, localMatrix, flags } = processGradientProps(\n    ctx.Skia,\n    props\n  );\n  const shader = ctx.Skia.Shader.MakeSweepGradient(\n    c.x,\n    c.y,\n    colors,\n    positions,\n    mode,\n    localMatrix,\n    flags,\n    start,\n    end\n  );\n  ctx.shaders.push(shader);\n};\n\nconst declareLinearGradientShader = (\n  ctx: DrawingContext,\n  props: LinearGradientProps\n) => {\n  \"worklet\";\n  const { start, end } = props;\n  const { colors, positions, mode, localMatrix, flags } = processGradientProps(\n    ctx.Skia,\n    props\n  );\n  const shader = ctx.Skia.Shader.MakeLinearGradient(\n    start,\n    end,\n    colors,\n    positions ?? null,\n    mode,\n    localMatrix,\n    flags\n  );\n  ctx.shaders.push(shader);\n};\n\nconst declareTurbulenceShader = (\n  ctx: DrawingContext,\n  props: TurbulenceProps\n) => {\n  \"worklet\";\n  const { freqX, freqY, octaves, seed, tileWidth, tileHeight } = props;\n  const shader = ctx.Skia.Shader.MakeTurbulence(\n    freqX,\n    freqY,\n    octaves,\n    seed,\n    tileWidth,\n    tileHeight\n  );\n  ctx.shaders.push(shader);\n};\n\nconst declareImageShader = (ctx: DrawingContext, props: ImageShaderProps) => {\n  \"worklet\";\n  const { fit, image, tx, ty, sampling, ...imageShaderProps } = props;\n  if (!image) {\n    return;\n  }\n\n  const rct = getRect(ctx.Skia, imageShaderProps);\n  const m3 = ctx.Skia.Matrix();\n  if (rct) {\n    const rects = fitRects(\n      fit,\n      { x: 0, y: 0, width: image.width(), height: image.height() },\n      rct\n    );\n    const [x, y, sx, sy] = rect2rect(rects.src, rects.dst);\n    m3.translate(x.translateX, y.translateY);\n    m3.scale(sx.scaleX, sy.scaleY);\n  }\n  const lm = ctx.Skia.Matrix();\n  lm.concat(m3);\n  processTransformProps(lm, imageShaderProps);\n  let shader: SkShader;\n  if (sampling && isCubicSampling(sampling)) {\n    shader = image.makeShaderCubic(\n      TileMode[enumKey(tx)],\n      TileMode[enumKey(ty)],\n      sampling.B,\n      sampling.C,\n      lm\n    );\n  } else {\n    shader = image.makeShaderCubic(\n      TileMode[enumKey(tx)],\n      TileMode[enumKey(ty)],\n      sampling?.filter ?? FilterMode.Linear,\n      sampling?.mipmap ?? MipmapMode.None,\n      lm\n    );\n  }\n  ctx.shaders.push(shader);\n};\n\nconst declareBlend = (ctx: DrawingContext, props: BlendProps) => {\n  \"worklet\";\n  const blend = BlendMode[enumKey(props.mode as BlendProps[\"mode\"])];\n  const shaders = ctx.shaders.splice(0, ctx.shaders.length);\n  if (shaders.length > 0) {\n    const composer = ctx.Skia.Shader.MakeBlend.bind(ctx.Skia.Shader, blend);\n    ctx.shaders.push(composeDeclarations(shaders, composer));\n  }\n};\n\nexport const isPushShader = (\n  command: Command\n): command is Command<CommandType.PushShader> => {\n  \"worklet\";\n  return command.type === CommandType.PushShader;\n};\n\ntype Props = {\n  [NodeType.Shader]: ShaderProps;\n  [NodeType.ImageShader]: ImageShaderProps;\n  [NodeType.ColorShader]: ColorProps;\n  [NodeType.Turbulence]: TurbulenceProps;\n  [NodeType.FractalNoise]: FractalNoiseProps;\n  [NodeType.LinearGradient]: LinearGradientProps;\n  [NodeType.RadialGradient]: RadialGradientProps;\n  [NodeType.SweepGradient]: SweepGradientProps;\n  [NodeType.TwoPointConicalGradient]: TwoPointConicalGradientProps;\n  [NodeType.Blend]: BlendProps;\n};\n\ninterface PushShader<T extends keyof Props>\n  extends Command<CommandType.PushShader> {\n  shaderType: T;\n  props: Props[T];\n}\n\nconst isShader = <T extends keyof Props>(\n  command: Command<CommandType.PushShader>,\n  type: T\n): command is PushShader<T> => {\n  \"worklet\";\n  return command.shaderType === type;\n};\n\nexport const pushShader = (\n  ctx: DrawingContext,\n  command: Command<CommandType.PushShader>\n) => {\n  \"worklet\";\n  if (isShader(command, NodeType.Shader)) {\n    declareShader(ctx, command.props);\n  } else if (isShader(command, NodeType.ImageShader)) {\n    declareImageShader(ctx, command.props);\n  } else if (isShader(command, NodeType.ColorShader)) {\n    declareColorShader(ctx, command.props);\n  } else if (isShader(command, NodeType.Turbulence)) {\n    declareTurbulenceShader(ctx, command.props);\n  } else if (isShader(command, NodeType.FractalNoise)) {\n    declareFractalNoiseShader(ctx, command.props);\n  } else if (isShader(command, NodeType.LinearGradient)) {\n    declareLinearGradientShader(ctx, command.props);\n  } else if (isShader(command, NodeType.RadialGradient)) {\n    declareRadialGradientShader(ctx, command.props);\n  } else if (isShader(command, NodeType.SweepGradient)) {\n    declareSweepGradientShader(ctx, command.props);\n  } else if (isShader(command, NodeType.TwoPointConicalGradient)) {\n    declareTwoPointConicalGradientShader(ctx, command.props);\n  } else if (isShader(command, NodeType.Blend)) {\n    declareBlend(ctx, command.props);\n  } else {\n    throw new Error(`Unknown shader type: ${command.shaderType}`);\n  }\n};\n"],"mappings":"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","ignoreList":[]}

package/lib/typescript/lib/commonjs/dom/nodes/datatypes/Gradient.d.ts

@@ -1,5 +1,6 @@
 export const __esModule: boolean;
 export function transformOrigin(origin: any, transform: any): any[];
+export function processColor(Skia: any, color: any): any;
 export function processGradientProps(Skia: any, { colors, positions, mode, flags, ...transform }: {
     [x: string]: any;
     colors: any;

package/lib/typescript/lib/commonjs/renderer/Canvas.d.ts

@@ -1,3 +1,3 @@
 export const __esModule: boolean;
-export const Canvas: any;
-export function useCanvasRef(): any;
+export const Canvas: _react.ForwardRefExoticComponent<_react.RefAttributes<any>>;
+import _react = require("react");

package/lib/typescript/lib/commonjs/renderer/CanvasOld.d.ts

@@ -0,0 +1,3 @@
+export const __esModule: boolean;
+export const CanvasOld: any;
+export function useCanvasRef(): any;

package/lib/typescript/lib/commonjs/sksg/HostConfig2.d.ts

@@ -0,0 +1,44 @@
+export const __esModule: boolean;
+export namespace sksgHostConfig {
+    let supportsMutation: boolean;
+    let isPrimaryRenderer: boolean;
+    let supportsPersistence: boolean;
+    let supportsHydration: boolean;
+    let scheduleTimeout: typeof setTimeout;
+    let cancelTimeout: typeof clearTimeout;
+    let noTimeout: number;
+    function appendChildToContainer(container: any, child: any): void;
+    function appendChild(parent: any, child: any): void;
+    function getRootHostContext(_rootContainerInstance: any): null;
+    function getChildHostContext(_parentHostContext: any, _type: any, _rootContainerInstance: any): null;
+    function shouldSetTextContent(_type: any, _props: any): boolean;
+    function createTextInstance(_text: any, _rootContainerInstance: any, _hostContext: any, _internalInstanceHandle: any): never;
+    function createInstance(type: any, propsWithChildren: any, _container: any, _hostContext: any, _internalInstanceHandle: any): {
+        type: any;
+        props: any;
+        children: never[];
+    };
+    function appendInitialChild(parentInstance: any, child: any): void;
+    function finalizeInitialChildren(parentInstance: any, _type: any, _props: any, _rootContainerInstance: any, _hostContext: any): boolean;
+    function commitMount(): void;
+    function prepareForCommit(_containerInfo: any): null;
+    function resetAfterCommit(container: any): void;
+    function getPublicInstance(node: any): any;
+    function prepareUpdate(_instance: any, type: any, oldProps: any, newProps: any, rootContainerInstance: any, _hostContext: any): any;
+    function commitUpdate(instance: any, _updatePayload: any, type: any, prevProps: any, nextProps: any, _internalHandle: any): void;
+    function commitTextUpdate(_textInstance: any, _oldText: any, _newText: any): void;
+    function clearContainer(container: any): void;
+    function preparePortalMount(): void;
+    function removeChild(parent: any, child: any): void;
+    function removeChildFromContainer(container: any, child: any): void;
+    function insertInContainerBefore(container: any, child: any, before: any): void;
+    function insertBefore(parent: any, child: any, before: any): void;
+    function getCurrentEventPriority(): number;
+    function beforeActiveInstanceBlur(): void;
+    function afterActiveInstanceBlur(): void;
+    function detachDeletedInstance(): void;
+    function getInstanceFromNode(_node: any): null;
+    function prepareScopeUpdate(_scopeInstance: any, _instance: any): void;
+    function getInstanceFromScope(_scopeInstance: any): null;
+}
+export function debug(...args: any[]): void;

package/lib/typescript/lib/commonjs/sksg/Recorder/commands/Paint.d.ts

@@ -1,5 +1,4 @@
 export const __esModule: boolean;
-export function processColor(Skia: any, color: any): any;
 export function setPaintProperties(Skia: any, paint: any, { opacity, color, blendMode, strokeWidth, style, strokeJoin, strokeCap, strokeMiter, antiAlias, dither }: {
     opacity: any;
     color: any;

package/lib/typescript/lib/module/dom/nodes/datatypes/Gradient.d.ts

@@ -1,4 +1,5 @@
 export function transformOrigin(origin: any, transform: any): any[];
+export function processColor(Skia: any, color: any): any;
 export function processGradientProps(Skia: any, { colors, positions, mode, flags, ...transform }: {
     [x: string]: any;
     colors: any;

package/lib/typescript/lib/module/index.d.ts

@@ -1,7 +1,7 @@
 export { JsiSkImage } from "./skia/web/JsiSkImage";
 export * from "./renderer";
+export * from "./renderer/CanvasOld";
 export * from "./renderer/Canvas";
-export * from "./renderer/Canvas2";
 export * from "./renderer/Offscreen";
 export * from "./views";
 export * from "./skia";

package/lib/typescript/lib/module/mock/index.d.ts

@@ -115,6 +115,7 @@ export function Mock(CanvasKit: any): {
     isCircleScalarDef: (def: any) => boolean;
     processCircle: (def: any) => any;
     transformOrigin: (origin: any, transform: any) => any[];
+    processColor: (Skia: any, color: any) => any;
     processGradientProps: (Skia: any, { colors, positions, mode, flags, ...transform }: {
         [x: string]: any;
         colors: any;

package/lib/typescript/lib/module/renderer/Canvas.d.ts

@@ -1,3 +1 @@
-export function useCanvasRef(): React.MutableRefObject<null>;
-export const Canvas: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
-import React from "react";
+export const Canvas: import("react").ForwardRefExoticComponent<import("react").RefAttributes<any>>;

package/lib/typescript/lib/module/renderer/CanvasOld.d.ts

@@ -0,0 +1,3 @@
+export function useCanvasRef(): React.MutableRefObject<null>;
+export const CanvasOld: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
+import React from "react";

package/lib/typescript/lib/module/sksg/HostConfig2.d.ts

@@ -0,0 +1,43 @@
+export function debug(...args: any[]): void;
+export namespace sksgHostConfig {
+    let supportsMutation: boolean;
+    let isPrimaryRenderer: boolean;
+    let supportsPersistence: boolean;
+    let supportsHydration: boolean;
+    let scheduleTimeout: typeof setTimeout;
+    let cancelTimeout: typeof clearTimeout;
+    let noTimeout: number;
+    function appendChildToContainer(container: any, child: any): void;
+    function appendChild(parent: any, child: any): void;
+    function getRootHostContext(_rootContainerInstance: any): null;
+    function getChildHostContext(_parentHostContext: any, _type: any, _rootContainerInstance: any): null;
+    function shouldSetTextContent(_type: any, _props: any): boolean;
+    function createTextInstance(_text: any, _rootContainerInstance: any, _hostContext: any, _internalInstanceHandle: any): never;
+    function createInstance(type: any, propsWithChildren: any, _container: any, _hostContext: any, _internalInstanceHandle: any): {
+        type: any;
+        props: any;
+        children: never[];
+    };
+    function appendInitialChild(parentInstance: any, child: any): void;
+    function finalizeInitialChildren(parentInstance: any, _type: any, _props: any, _rootContainerInstance: any, _hostContext: any): boolean;
+    function commitMount(): void;
+    function prepareForCommit(_containerInfo: any): null;
+    function resetAfterCommit(container: any): void;
+    function getPublicInstance(node: any): any;
+    function prepareUpdate(_instance: any, type: any, oldProps: any, newProps: any, rootContainerInstance: any, _hostContext: any): any;
+    function commitUpdate(instance: any, _updatePayload: any, type: any, prevProps: any, nextProps: any, _internalHandle: any): void;
+    function commitTextUpdate(_textInstance: any, _oldText: any, _newText: any): void;
+    function clearContainer(container: any): void;
+    function preparePortalMount(): void;
+    function removeChild(parent: any, child: any): void;
+    function removeChildFromContainer(container: any, child: any): void;
+    function insertInContainerBefore(container: any, child: any, before: any): void;
+    function insertBefore(parent: any, child: any, before: any): void;
+    function getCurrentEventPriority(): number;
+    function beforeActiveInstanceBlur(): void;
+    function afterActiveInstanceBlur(): void;
+    function detachDeletedInstance(): void;
+    function getInstanceFromNode(_node: any): null;
+    function prepareScopeUpdate(_scopeInstance: any, _instance: any): void;
+    function getInstanceFromScope(_scopeInstance: any): null;
+}

package/lib/typescript/lib/module/sksg/Recorder/commands/Paint.d.ts

@@ -1,4 +1,3 @@
-export function processColor(Skia: any, color: any): any;
 export function setPaintProperties(Skia: any, paint: any, { opacity, color, blendMode, strokeWidth, style, strokeJoin, strokeCap, strokeMiter, antiAlias, dither }: {
     opacity: any;
     color: any;

package/lib/typescript/src/dom/nodes/datatypes/Gradient.d.ts

@@ -242,6 +242,7 @@ export declare const transformOrigin: (origin: Vector, transform: Transforms3d)
     rotateY: number;
     matrix: import("../../../skia/types").Matrix4;
 }, "matrix">)[];
+export declare const processColor: (Skia: Skia, color: number | string | Float32Array | number[]) => Float32Array;
 export declare const processGradientProps: (Skia: Skia, { colors, positions, mode, flags, ...transform }: GradientProps) => {
     colors: Float32Array[];
     positions: number[] | null;

package/lib/typescript/src/index.d.ts

@@ -1,8 +1,8 @@
 import "./skia/NativeSetup";
 export { JsiSkImage } from "./skia/web/JsiSkImage";
 export * from "./renderer";
+export * from "./renderer/CanvasOld";
 export * from "./renderer/Canvas";
-export * from "./renderer/Canvas2";
 export * from "./renderer/Offscreen";
 export * from "./views";
 export * from "./skia";

package/lib/typescript/src/renderer/Canvas.d.ts

@@ -1,11 +1,10 @@
-import React from "react";
-import type { RefObject, ReactNode, FunctionComponent } from "react";
-import { SkiaDomView } from "../views";
-import type { SkiaBaseViewProps } from "../views";
-export declare const useCanvasRef: () => React.RefObject<SkiaDomView>;
-export interface CanvasProps extends SkiaBaseViewProps {
-    ref?: RefObject<SkiaDomView>;
-    children: ReactNode;
-    mode?: "default" | "continuous";
+import type { ViewProps } from "react-native";
+import type { SharedValue } from "react-native-reanimated";
+import type { SkSize } from "../skia/types";
+export interface CanvasProps extends ViewProps {
+    debug?: boolean;
+    opaque?: boolean;
+    onSize?: SharedValue<SkSize>;
+    mode?: "continuous" | "default";
 }
-export declare const Canvas: FunctionComponent<CanvasProps & React.RefAttributes<SkiaDomView>>;
+export declare const Canvas: import("react").ForwardRefExoticComponent<CanvasProps & import("react").RefAttributes<unknown>>;

package/lib/typescript/src/renderer/CanvasOld.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+import type { RefObject, ReactNode, FunctionComponent } from "react";
+import { SkiaDomView } from "../views";
+import type { SkiaBaseViewProps } from "../views";
+export declare const useCanvasRef: () => React.RefObject<SkiaDomView>;
+export interface CanvasOldProps extends SkiaBaseViewProps {
+    ref?: RefObject<SkiaDomView>;
+    children: ReactNode;
+    mode?: "default" | "continuous";
+}
+export declare const CanvasOld: FunctionComponent<CanvasOldProps & React.RefAttributes<SkiaDomView>>;

package/lib/typescript/src/sksg/HostConfig2.d.ts

@@ -0,0 +1,19 @@
+import type { HostConfig } from "react-reconciler";
+import type { NodeType } from "../dom/types";
+import type { Container } from "./Container";
+import type { Node } from "./Node";
+export declare const debug: (message?: any, ...optionalParams: any[]) => void;
+type Instance = Node<unknown>;
+type Props = object;
+type TextInstance = Node<unknown>;
+type SuspenseInstance = Instance;
+type HydratableInstance = Instance;
+type PublicInstance = Instance;
+type HostContext = null;
+type UpdatePayload = Container;
+type ChildSet = unknown;
+type TimeoutHandle = NodeJS.Timeout;
+type NoTimeout = -1;
+type SkiaHostConfig = HostConfig<NodeType, Props, Container, Instance, TextInstance, SuspenseInstance, HydratableInstance, PublicInstance, HostContext, UpdatePayload, ChildSet, TimeoutHandle, NoTimeout>;
+export declare const sksgHostConfig: SkiaHostConfig;
+export {};

package/lib/typescript/src/sksg/Recorder/commands/Paint.d.ts

@@ -1,4 +1,3 @@
 import type { PaintProps } from "../../../dom/types";
 import type { SkPaint, Skia } from "../../../skia/types";
-export declare const processColor: (Skia: Skia, color: number | string | Float32Array | number[]) => Float32Array;
 export declare const setPaintProperties: (Skia: Skia, paint: SkPaint, { opacity, color, blendMode, strokeWidth, style, strokeJoin, strokeCap, strokeMiter, antiAlias, dither, }: PaintProps) => void;

package/package.json

@@ -7,7 +7,7 @@
     "setup-skia-web": "./scripts/setup-canvaskit.js"
   },
   "title": "React Native Skia",
-  "version": "1.9.1",
+  "version": "1.10.1",
   "description": "High-performance React Native Graphics using Skia",
   "main": "lib/module/index.js",
   "react-native": "src/index.ts",

package/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,

package/src/index.ts

@@ -1,8 +1,8 @@
 import "./skia/NativeSetup";
 export { JsiSkImage } from "./skia/web/JsiSkImage";
 export * from "./renderer";
+export * from "./renderer/CanvasOld";
 export * from "./renderer/Canvas";
-export * from "./renderer/Canvas2";
 export * from "./renderer/Offscreen";
 export * from "./views";
 export * from "./skia";

package/src/renderer/Canvas.tsx

@@ -1,32 +1,24 @@
-import React, {
-  useEffect,
+import {
+  forwardRef,
   useCallback,
+  useEffect,
+  useImperativeHandle,
   useMemo,
-  forwardRef,
   useRef,
 } from "react";
-import type {
-  RefObject,
-  ReactNode,
-  MutableRefObject,
-  ForwardedRef,
-  FunctionComponent,
-} from "react";
-import type { LayoutChangeEvent } from "react-native";
+import type { LayoutChangeEvent, ViewProps } from "react-native";
+import type { SharedValue } from "react-native-reanimated";
 
-import { SkiaDomView } from "../views";
+import { SkiaViewNativeId } from "../views/SkiaViewNativeId";
+import SkiaPictureViewNativeComponent from "../specs/SkiaPictureViewNativeComponent";
+import type { SkRect, SkSize } from "../skia/types";
+import { SkiaSGRoot } from "../sksg/Reconciler";
+import { Skia } from "../skia";
 import type { SkiaBaseViewProps } from "../views";
 
-import { SkiaRoot } from "./Reconciler";
-
-export const useCanvasRef = () => useRef<SkiaDomView>(null);
-
-export interface CanvasProps extends SkiaBaseViewProps {
-  ref?: RefObject<SkiaDomView>;
-  children: ReactNode;
-  mode?: "default" | "continuous";
-}
+const NativeSkiaPictureView = SkiaPictureViewNativeComponent;
 
+// TODO: no need to go through the JS thread for this
 const useOnSizeEvent = (
   resultValue: SkiaBaseViewProps["onSize"],
   onLayout?: (event: LayoutChangeEvent) => void
@@ -46,39 +38,40 @@ const useOnSizeEvent = (
   );
 };
 
-export const Canvas = forwardRef<SkiaDomView, CanvasProps>(
+export interface CanvasProps extends ViewProps {
+  debug?: boolean;
+  opaque?: boolean;
+  onSize?: SharedValue<SkSize>;
+  mode?: "continuous" | "default";
+}
+
+export const Canvas = forwardRef(
   (
     {
-      children,
-      style,
+      mode,
       debug,
-      mode = "default",
-      onSize: _onSize,
+      opaque,
+      children,
+      onSize,
       onLayout: _onLayout,
-      ...props
-    },
-    forwardedRef
+      ...viewProps
+    }: CanvasProps,
+    ref
   ) => {
-    const onLayout = useOnSizeEvent(_onSize, _onLayout);
-    const innerRef = useCanvasRef();
-    const ref = useCombinedRefs(forwardedRef, innerRef);
-    const redraw = useCallback(() => {
-      innerRef.current?.redraw();
-    }, [innerRef]);
-    const getNativeId = useCallback(() => {
-      const id = innerRef.current?.nativeId ?? -1;
-      return id;
-    }, [innerRef]);
+    const rafId = useRef<number | null>(null);
+    const onLayout = useOnSizeEvent(onSize, _onLayout);
+    // Native ID
+    const nativeId = useMemo(() => {
+      return SkiaViewNativeId.current++;
+    }, []);
 
-    const root = useMemo(
-      () => new SkiaRoot(redraw, getNativeId),
-      [redraw, getNativeId]
-    );
+    // Root
+    const root = useMemo(() => new SkiaSGRoot(Skia, nativeId), [nativeId]);
 
-    // Render effect
+    // Render effects
     useEffect(() => {
       root.render(children);
-    }, [children, root, redraw]);
+    }, [children, root]);
 
     useEffect(() => {
       return () => {
@@ -86,41 +79,50 @@ export const Canvas = forwardRef<SkiaDomView, CanvasProps>(
       };
     }, [root]);
 
+    const requestRedraw = useCallback(() => {
+      rafId.current = requestAnimationFrame(() => {
+        root.render(children);
+        if (mode === "continuous") {
+          requestRedraw();
+        }
+      });
+    }, [children, mode, root]);
+
+    useEffect(() => {
+      if (mode === "continuous") {
+        console.warn("The `mode` property in `Canvas` is deprecated.");
+        requestRedraw();
+      }
+      return () => {
+        if (rafId.current !== null) {
+          cancelAnimationFrame(rafId.current);
+        }
+      };
+    }, [mode, requestRedraw]);
+    // Component methods
+    useImperativeHandle(ref, () => ({
+      makeImageSnapshot: (rect?: SkRect) => {
+        return SkiaViewApi.makeImageSnapshot(nativeId, rect);
+      },
+      makeImageSnapshotAsync: (rect?: SkRect) => {
+        return SkiaViewApi.makeImageSnapshotAsync(nativeId, rect);
+      },
+      redraw: () => {
+        SkiaViewApi.requestRedraw(nativeId);
+      },
+      getNativeId: () => {
+        return nativeId;
+      },
+    }));
     return (
-      <SkiaDomView
-        ref={ref}
-        style={style}
-        root={root.dom}
-        onLayout={onLayout}
+      <NativeSkiaPictureView
+        collapsable={false}
+        nativeID={`${nativeId}`}
         debug={debug}
-        mode={mode}
-        {...props}
+        opaque={opaque}
+        onLayout={onLayout}
+        {...viewProps}
       />
     );
   }
-) as FunctionComponent<CanvasProps & React.RefAttributes<SkiaDomView>>;
-
-/**
- * Combines a list of refs into a single ref. This can be used to provide
- * both a forwarded ref and an internal ref keeping the same functionality
- * on both of the refs.
- * @param refs Array of refs to combine
- * @returns A single ref that can be used in a ref prop.
- */
-const useCombinedRefs = <T,>(
-  ...refs: Array<MutableRefObject<T> | ForwardedRef<T>>
-) => {
-  const targetRef = React.useRef<T>(null);
-  React.useEffect(() => {
-    refs.forEach((ref) => {
-      if (ref) {
-        if (typeof ref === "function") {
-          ref(targetRef.current);
-        } else {
-          ref.current = targetRef.current;
-        }
-      }
-    });
-  }, [refs]);
-  return targetRef;
-};
+);