@shopify/react-native-skia 0.1.225 → 0.1.227

package/lib/module/dom/nodes/datatypes/Fitting.js.map

@@ -1 +1 @@
-{"version":3,"names":["exhaustiveCheck","size","width","height","rect2rect","src","dst","scaleX","scaleY","translateX","x","translateY","y","fitRects","fit","rect","sizes","applyBoxFit","inscribe","halfWidthDelta","halfHeightDelta","input","output","Math","min","aspectRatio"],"sources":["Fitting.ts"],"sourcesContent":["import { exhaustiveCheck } from \"../../../renderer/typeddash\";\nimport type { SkRect } from \"../../../skia/types\";\nimport type { Fit } from \"../../types\";\n\nexport interface Size {\n  width: number;\n  height: number;\n}\n\nexport const size = (width = 0, height = 0) => ({ width, height });\n\nexport const rect2rect = (src: SkRect, dst: SkRect) => {\n  const scaleX = dst.width / src.width;\n  const scaleY = dst.height / src.height;\n  const translateX = dst.x - src.x * scaleX;\n  const translateY = dst.y - src.y * scaleY;\n  return [{ translateX }, { translateY }, { scaleX }, { scaleY }] as const;\n};\n\nexport const fitRects = (\n  fit: Fit,\n  rect: SkRect,\n  { x, y, width, height }: SkRect\n) => {\n  const sizes = applyBoxFit(\n    fit,\n    { width: rect.width, height: rect.height },\n    { width, height }\n  );\n  const src = inscribe(sizes.src, rect);\n  const dst = inscribe(sizes.dst, {\n    x,\n    y,\n    width,\n    height,\n  });\n  return { src, dst };\n};\n\nconst inscribe = (\n  { width, height }: Size,\n  rect: { x: number; y: number; width: number; height: number }\n) => {\n  const halfWidthDelta = (rect.width - width) / 2.0;\n  const halfHeightDelta = (rect.height - height) / 2.0;\n  return {\n    x: rect.x + halfWidthDelta,\n    y: rect.y + halfHeightDelta,\n    width,\n    height,\n  };\n};\n\nconst applyBoxFit = (fit: Fit, input: Size, output: Size) => {\n  let src = size(),\n    dst = size();\n  if (\n    input.height <= 0.0 ||\n    input.width <= 0.0 ||\n    output.height <= 0.0 ||\n    output.width <= 0.0\n  ) {\n    return { src, dst };\n  }\n  switch (fit) {\n    case \"fill\":\n      src = input;\n      dst = output;\n      break;\n    case \"contain\":\n      src = input;\n      if (output.width / output.height > src.width / src.height) {\n        dst = size((src.width * output.height) / src.height, output.height);\n      } else {\n        dst = size(output.width, (src.height * output.width) / src.width);\n      }\n      break;\n    case \"cover\":\n      if (output.width / output.height > input.width / input.height) {\n        src = size(input.width, (input.width * output.height) / output.width);\n      } else {\n        src = size((input.height * output.width) / output.height, input.height);\n      }\n      dst = output;\n      break;\n    case \"fitWidth\":\n      src = size(input.width, (input.width * output.height) / output.width);\n      dst = size(output.width, (src.height * output.width) / src.width);\n      break;\n    case \"fitHeight\":\n      src = size((input.height * output.width) / output.height, input.height);\n      dst = size((src.width * output.height) / src.height, output.height);\n      break;\n    case \"none\":\n      src = size(\n        Math.min(input.width, output.width),\n        Math.min(input.height, output.height)\n      );\n      dst = src;\n      break;\n    case \"scaleDown\":\n      src = input;\n      dst = input;\n      const aspectRatio = input.width / input.height;\n      if (dst.height > output.height) {\n        dst = size(output.height * aspectRatio, output.height);\n      }\n      if (dst.width > output.width) {\n        dst = size(output.width, output.width / aspectRatio);\n      }\n      break;\n    default:\n      exhaustiveCheck(fit);\n  }\n  return { src, dst };\n};\n"],"mappings":"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"}
+{"version":3,"names":["exhaustiveCheck","size","width","height","rect2rect","src","dst","scaleX","scaleY","translateX","x","translateY","y","fitRects","fit","rect","sizes","applyBoxFit","inscribe","halfWidthDelta","halfHeightDelta","input","output","Math","min","aspectRatio"],"sources":["Fitting.ts"],"sourcesContent":["import { exhaustiveCheck } from \"../../../renderer/typeddash\";\nimport type { SkRect } from \"../../../skia/types\";\nimport type { Fit } from \"../../types\";\n\nexport interface Size {\n  width: number;\n  height: number;\n}\n\nexport const size = (width = 0, height = 0) => ({ width, height });\n\nexport const rect2rect = (\n  src: SkRect,\n  dst: SkRect\n): [\n  { translateX: number },\n  { translateY: number },\n  { scaleX: number },\n  { scaleY: number }\n] => {\n  const scaleX = dst.width / src.width;\n  const scaleY = dst.height / src.height;\n  const translateX = dst.x - src.x * scaleX;\n  const translateY = dst.y - src.y * scaleY;\n  return [{ translateX }, { translateY }, { scaleX }, { scaleY }];\n};\n\nexport const fitRects = (\n  fit: Fit,\n  rect: SkRect,\n  { x, y, width, height }: SkRect\n) => {\n  const sizes = applyBoxFit(\n    fit,\n    { width: rect.width, height: rect.height },\n    { width, height }\n  );\n  const src = inscribe(sizes.src, rect);\n  const dst = inscribe(sizes.dst, {\n    x,\n    y,\n    width,\n    height,\n  });\n  return { src, dst };\n};\n\nconst inscribe = (\n  { width, height }: Size,\n  rect: { x: number; y: number; width: number; height: number }\n) => {\n  const halfWidthDelta = (rect.width - width) / 2.0;\n  const halfHeightDelta = (rect.height - height) / 2.0;\n  return {\n    x: rect.x + halfWidthDelta,\n    y: rect.y + halfHeightDelta,\n    width,\n    height,\n  };\n};\n\nconst applyBoxFit = (fit: Fit, input: Size, output: Size) => {\n  let src = size(),\n    dst = size();\n  if (\n    input.height <= 0.0 ||\n    input.width <= 0.0 ||\n    output.height <= 0.0 ||\n    output.width <= 0.0\n  ) {\n    return { src, dst };\n  }\n  switch (fit) {\n    case \"fill\":\n      src = input;\n      dst = output;\n      break;\n    case \"contain\":\n      src = input;\n      if (output.width / output.height > src.width / src.height) {\n        dst = size((src.width * output.height) / src.height, output.height);\n      } else {\n        dst = size(output.width, (src.height * output.width) / src.width);\n      }\n      break;\n    case \"cover\":\n      if (output.width / output.height > input.width / input.height) {\n        src = size(input.width, (input.width * output.height) / output.width);\n      } else {\n        src = size((input.height * output.width) / output.height, input.height);\n      }\n      dst = output;\n      break;\n    case \"fitWidth\":\n      src = size(input.width, (input.width * output.height) / output.width);\n      dst = size(output.width, (src.height * output.width) / src.width);\n      break;\n    case \"fitHeight\":\n      src = size((input.height * output.width) / output.height, input.height);\n      dst = size((src.width * output.height) / src.height, output.height);\n      break;\n    case \"none\":\n      src = size(\n        Math.min(input.width, output.width),\n        Math.min(input.height, output.height)\n      );\n      dst = src;\n      break;\n    case \"scaleDown\":\n      src = input;\n      dst = input;\n      const aspectRatio = input.width / input.height;\n      if (dst.height > output.height) {\n        dst = size(output.height * aspectRatio, output.height);\n      }\n      if (dst.width > output.width) {\n        dst = size(output.width, output.width / aspectRatio);\n      }\n      break;\n    default:\n      exhaustiveCheck(fit);\n  }\n  return { src, dst };\n};\n"],"mappings":"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"}

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

@@ -1,87 +1,247 @@
-import type { Skia, SkRect, Transforms2d, Vector } from "../../../skia/types";
+import type { Skia, SkRect, Transforms3d, Vector } from "../../../skia/types";
 import { TileMode } from "../../../skia/types";
 import type { GradientProps, ImageShaderProps } from "../../types";
-export declare const transformOrigin: (origin: Vector, transform: Transforms2d) => (Pick<{
-    readonly translateX: number;
-    readonly translateY: number;
-    readonly scale: number;
-    readonly skewX: number;
-    readonly skewY: number;
-    readonly scaleX: number;
-    readonly scaleY: number;
-    readonly rotateZ: number;
-    readonly rotate: number;
+export declare const transformOrigin: (origin: Vector, transform: Transforms3d) => (Pick<{
+    translateX: number;
+    translateY: number;
+    translateZ: number;
+    translate: readonly [number, number] | readonly [number, number, number];
+    scale: number;
+    scaleX: number;
+    scaleY: number;
+    skewX: number;
+    skewY: number;
+    rotateZ: number;
+    rotate: number;
+    perspective: number;
+    rotateX: number;
+    rotateY: number;
+    matrix: import("../../../skia/types").Matrix4;
 }, "translateX"> | Pick<{
-    readonly translateX: number;
-    readonly translateY: number;
-    readonly scale: number;
-    readonly skewX: number;
-    readonly skewY: number;
-    readonly scaleX: number;
-    readonly scaleY: number;
-    readonly rotateZ: number;
-    readonly rotate: number;
+    translateX: number;
+    translateY: number;
+    translateZ: number;
+    translate: readonly [number, number] | readonly [number, number, number];
+    scale: number;
+    scaleX: number;
+    scaleY: number;
+    skewX: number;
+    skewY: number;
+    rotateZ: number;
+    rotate: number;
+    perspective: number;
+    rotateX: number;
+    rotateY: number;
+    matrix: import("../../../skia/types").Matrix4;
 }, "translateY"> | Pick<{
-    readonly translateX: number;
-    readonly translateY: number;
-    readonly scale: number;
-    readonly skewX: number;
-    readonly skewY: number;
-    readonly scaleX: number;
-    readonly scaleY: number;
-    readonly rotateZ: number;
-    readonly rotate: number;
+    translateX: number;
+    translateY: number;
+    translateZ: number;
+    translate: readonly [number, number] | readonly [number, number, number];
+    scale: number;
+    scaleX: number;
+    scaleY: number;
+    skewX: number;
+    skewY: number;
+    rotateZ: number;
+    rotate: number;
+    perspective: number;
+    rotateX: number;
+    rotateY: number;
+    matrix: import("../../../skia/types").Matrix4;
+}, "translateZ"> | Pick<{
+    translateX: number;
+    translateY: number;
+    translateZ: number;
+    translate: readonly [number, number] | readonly [number, number, number];
+    scale: number;
+    scaleX: number;
+    scaleY: number;
+    skewX: number;
+    skewY: number;
+    rotateZ: number;
+    rotate: number;
+    perspective: number;
+    rotateX: number;
+    rotateY: number;
+    matrix: import("../../../skia/types").Matrix4;
+}, "translate"> | Pick<{
+    translateX: number;
+    translateY: number;
+    translateZ: number;
+    translate: readonly [number, number] | readonly [number, number, number];
+    scale: number;
+    scaleX: number;
+    scaleY: number;
+    skewX: number;
+    skewY: number;
+    rotateZ: number;
+    rotate: number;
+    perspective: number;
+    rotateX: number;
+    rotateY: number;
+    matrix: import("../../../skia/types").Matrix4;
 }, "scale"> | Pick<{
-    readonly translateX: number;
-    readonly translateY: number;
-    readonly scale: number;
-    readonly skewX: number;
-    readonly skewY: number;
-    readonly scaleX: number;
-    readonly scaleY: number;
-    readonly rotateZ: number;
-    readonly rotate: number;
+    translateX: number;
+    translateY: number;
+    translateZ: number;
+    translate: readonly [number, number] | readonly [number, number, number];
+    scale: number;
+    scaleX: number;
+    scaleY: number;
+    skewX: number;
+    skewY: number;
+    rotateZ: number;
+    rotate: number;
+    perspective: number;
+    rotateX: number;
+    rotateY: number;
+    matrix: import("../../../skia/types").Matrix4;
 }, "scaleX"> | Pick<{
-    readonly translateX: number;
-    readonly translateY: number;
-    readonly scale: number;
-    readonly skewX: number;
-    readonly skewY: number;
-    readonly scaleX: number;
-    readonly scaleY: number;
-    readonly rotateZ: number;
-    readonly rotate: number;
+    translateX: number;
+    translateY: number;
+    translateZ: number;
+    translate: readonly [number, number] | readonly [number, number, number];
+    scale: number;
+    scaleX: number;
+    scaleY: number;
+    skewX: number;
+    skewY: number;
+    rotateZ: number;
+    rotate: number;
+    perspective: number;
+    rotateX: number;
+    rotateY: number;
+    matrix: import("../../../skia/types").Matrix4;
 }, "scaleY"> | Pick<{
-    readonly translateX: number;
-    readonly translateY: number;
-    readonly scale: number;
-    readonly skewX: number;
-    readonly skewY: number;
-    readonly scaleX: number;
-    readonly scaleY: number;
-    readonly rotateZ: number;
-    readonly rotate: number;
+    translateX: number;
+    translateY: number;
+    translateZ: number;
+    translate: readonly [number, number] | readonly [number, number, number];
+    scale: number;
+    scaleX: number;
+    scaleY: number;
+    skewX: number;
+    skewY: number;
+    rotateZ: number;
+    rotate: number;
+    perspective: number;
+    rotateX: number;
+    rotateY: number;
+    matrix: import("../../../skia/types").Matrix4;
 }, "skewX"> | Pick<{
-    readonly translateX: number;
-    readonly translateY: number;
-    readonly scale: number;
-    readonly skewX: number;
-    readonly skewY: number;
-    readonly scaleX: number;
-    readonly scaleY: number;
-    readonly rotateZ: number;
-    readonly rotate: number;
+    translateX: number;
+    translateY: number;
+    translateZ: number;
+    translate: readonly [number, number] | readonly [number, number, number];
+    scale: number;
+    scaleX: number;
+    scaleY: number;
+    skewX: number;
+    skewY: number;
+    rotateZ: number;
+    rotate: number;
+    perspective: number;
+    rotateX: number;
+    rotateY: number;
+    matrix: import("../../../skia/types").Matrix4;
 }, "skewY"> | Pick<{
-    readonly translateX: number;
-    readonly translateY: number;
-    readonly scale: number;
-    readonly skewX: number;
-    readonly skewY: number;
-    readonly scaleX: number;
-    readonly scaleY: number;
-    readonly rotateZ: number;
-    readonly rotate: number;
-}, "rotate">)[];
+    translateX: number;
+    translateY: number;
+    translateZ: number;
+    translate: readonly [number, number] | readonly [number, number, number];
+    scale: number;
+    scaleX: number;
+    scaleY: number;
+    skewX: number;
+    skewY: number;
+    rotateZ: number;
+    rotate: number;
+    perspective: number;
+    rotateX: number;
+    rotateY: number;
+    matrix: import("../../../skia/types").Matrix4;
+}, "perspective"> | Pick<{
+    translateX: number;
+    translateY: number;
+    translateZ: number;
+    translate: readonly [number, number] | readonly [number, number, number];
+    scale: number;
+    scaleX: number;
+    scaleY: number;
+    skewX: number;
+    skewY: number;
+    rotateZ: number;
+    rotate: number;
+    perspective: number;
+    rotateX: number;
+    rotateY: number;
+    matrix: import("../../../skia/types").Matrix4;
+}, "rotateX"> | Pick<{
+    translateX: number;
+    translateY: number;
+    translateZ: number;
+    translate: readonly [number, number] | readonly [number, number, number];
+    scale: number;
+    scaleX: number;
+    scaleY: number;
+    skewX: number;
+    skewY: number;
+    rotateZ: number;
+    rotate: number;
+    perspective: number;
+    rotateX: number;
+    rotateY: number;
+    matrix: import("../../../skia/types").Matrix4;
+}, "rotateY"> | Pick<{
+    translateX: number;
+    translateY: number;
+    translateZ: number;
+    translate: readonly [number, number] | readonly [number, number, number];
+    scale: number;
+    scaleX: number;
+    scaleY: number;
+    skewX: number;
+    skewY: number;
+    rotateZ: number;
+    rotate: number;
+    perspective: number;
+    rotateX: number;
+    rotateY: number;
+    matrix: import("../../../skia/types").Matrix4;
+}, "rotateZ"> | Pick<{
+    translateX: number;
+    translateY: number;
+    translateZ: number;
+    translate: readonly [number, number] | readonly [number, number, number];
+    scale: number;
+    scaleX: number;
+    scaleY: number;
+    skewX: number;
+    skewY: number;
+    rotateZ: number;
+    rotate: number;
+    perspective: number;
+    rotateX: number;
+    rotateY: number;
+    matrix: import("../../../skia/types").Matrix4;
+}, "rotate"> | Pick<{
+    translateX: number;
+    translateY: number;
+    translateZ: number;
+    translate: readonly [number, number] | readonly [number, number, number];
+    scale: number;
+    scaleX: number;
+    scaleY: number;
+    skewX: number;
+    skewY: number;
+    rotateZ: number;
+    rotate: number;
+    perspective: number;
+    rotateX: number;
+    rotateY: number;
+    matrix: import("../../../skia/types").Matrix4;
+}, "matrix">)[];
 export declare const processGradientProps: (Skia: Skia, { colors, positions, mode, flags, ...transform }: GradientProps) => {
     colors: Float32Array[];
     positions: number[] | null;

package/lib/module/dom/nodes/datatypes/Gradient.js.map

@@ -1 +1 @@
-{"version":3,"names":["TileMode","enumKey","processTransformProps","transformOrigin","origin","transform","translateX","x","translateY","y","processGradientProps","Skia","colors","positions","mode","flags","localMatrix","Matrix","map","color","Color","getRect","props","width","height","rect","undefined","XYWHRect"],"sources":["Gradient.ts"],"sourcesContent":["import type { Skia, SkRect, Transforms2d, Vector } from \"../../../skia/types\";\nimport { TileMode } from \"../../../skia/types\";\nimport type { GradientProps, ImageShaderProps } from \"../../types\";\n\nimport { enumKey } from \"./Enum\";\nimport { processTransformProps } from \"./Transform\";\n\nexport const transformOrigin = (origin: Vector, transform: Transforms2d) => [\n  { translateX: origin.x },\n  { translateY: origin.y },\n  ...transform,\n  { translateX: -origin.x },\n  { translateY: -origin.y },\n];\n\nexport const processGradientProps = (\n  Skia: Skia,\n  { colors, positions, mode, flags, ...transform }: GradientProps\n) => {\n  const localMatrix = Skia.Matrix();\n  processTransformProps(localMatrix, transform);\n  return {\n    colors: colors.map((color) => Skia.Color(color)),\n    positions: positions ?? null,\n    mode: TileMode[enumKey(mode ?? \"clamp\")],\n    flags,\n    localMatrix,\n  };\n};\n\nexport const getRect = (\n  Skia: Skia,\n  props: Omit<ImageShaderProps, \"tx\" | \"ty\" | \"fm\" | \"mm\" | \"fit\" | \"image\">\n): SkRect | undefined => {\n  const { x, y, width, height } = props;\n  if (props.rect) {\n    return props.rect;\n  } else if (\n    x !== undefined &&\n    y !== undefined &&\n    width !== undefined &&\n    height !== undefined\n  ) {\n    return Skia.XYWHRect(x, y, width, height);\n  } else {\n    return undefined;\n  }\n};\n"],"mappings":"AACA,SAASA,QAAT,QAAyB,qBAAzB;AAGA,SAASC,OAAT,QAAwB,QAAxB;AACA,SAASC,qBAAT,QAAsC,aAAtC;AAEA,OAAO,MAAMC,eAAe,GAAG,CAACC,MAAD,EAAiBC,SAAjB,KAA6C,CAC1E;EAAEC,UAAU,EAAEF,MAAM,CAACG;AAArB,CAD0E,EAE1E;EAAEC,UAAU,EAAEJ,MAAM,CAACK;AAArB,CAF0E,EAG1E,GAAGJ,SAHuE,EAI1E;EAAEC,UAAU,EAAE,CAACF,MAAM,CAACG;AAAtB,CAJ0E,EAK1E;EAAEC,UAAU,EAAE,CAACJ,MAAM,CAACK;AAAtB,CAL0E,CAArE;AAQP,OAAO,MAAMC,oBAAoB,GAAG,CAClCC,IADkC,WAG/B;EAAA,IADH;IAAEC,MAAF;IAAUC,SAAV;IAAqBC,IAArB;IAA2BC,KAA3B;IAAkC,GAAGV;EAArC,CACG;EACH,MAAMW,WAAW,GAAGL,IAAI,CAACM,MAAL,EAApB;EACAf,qBAAqB,CAACc,WAAD,EAAcX,SAAd,CAArB;EACA,OAAO;IACLO,MAAM,EAAEA,MAAM,CAACM,GAAP,CAAYC,KAAD,IAAWR,IAAI,CAACS,KAAL,CAAWD,KAAX,CAAtB,CADH;IAELN,SAAS,EAAEA,SAAF,aAAEA,SAAF,cAAEA,SAAF,GAAe,IAFnB;IAGLC,IAAI,EAAEd,QAAQ,CAACC,OAAO,CAACa,IAAD,aAACA,IAAD,cAACA,IAAD,GAAS,OAAT,CAAR,CAHT;IAILC,KAJK;IAKLC;EALK,CAAP;AAOD,CAbM;AAeP,OAAO,MAAMK,OAAO,GAAG,CACrBV,IADqB,EAErBW,KAFqB,KAGE;EACvB,MAAM;IAAEf,CAAF;IAAKE,CAAL;IAAQc,KAAR;IAAeC;EAAf,IAA0BF,KAAhC;;EACA,IAAIA,KAAK,CAACG,IAAV,EAAgB;IACd,OAAOH,KAAK,CAACG,IAAb;EACD,CAFD,MAEO,IACLlB,CAAC,KAAKmB,SAAN,IACAjB,CAAC,KAAKiB,SADN,IAEAH,KAAK,KAAKG,SAFV,IAGAF,MAAM,KAAKE,SAJN,EAKL;IACA,OAAOf,IAAI,CAACgB,QAAL,CAAcpB,CAAd,EAAiBE,CAAjB,EAAoBc,KAApB,EAA2BC,MAA3B,CAAP;EACD,CAPM,MAOA;IACL,OAAOE,SAAP;EACD;AACF,CAjBM"}
+{"version":3,"names":["TileMode","enumKey","processTransformProps","transformOrigin","origin","transform","translateX","x","translateY","y","processGradientProps","Skia","colors","positions","mode","flags","localMatrix","Matrix","map","color","Color","getRect","props","width","height","rect","undefined","XYWHRect"],"sources":["Gradient.ts"],"sourcesContent":["import type { Skia, SkRect, Transforms3d, Vector } from \"../../../skia/types\";\nimport { TileMode } from \"../../../skia/types\";\nimport type { GradientProps, ImageShaderProps } from \"../../types\";\n\nimport { enumKey } from \"./Enum\";\nimport { processTransformProps } from \"./Transform\";\n\nexport const transformOrigin = (origin: Vector, transform: Transforms3d) => [\n  { translateX: origin.x },\n  { translateY: origin.y },\n  ...transform,\n  { translateX: -origin.x },\n  { translateY: -origin.y },\n];\n\nexport const processGradientProps = (\n  Skia: Skia,\n  { colors, positions, mode, flags, ...transform }: GradientProps\n) => {\n  const localMatrix = Skia.Matrix();\n  processTransformProps(localMatrix, transform);\n  return {\n    colors: colors.map((color) => Skia.Color(color)),\n    positions: positions ?? null,\n    mode: TileMode[enumKey(mode ?? \"clamp\")],\n    flags,\n    localMatrix,\n  };\n};\n\nexport const getRect = (\n  Skia: Skia,\n  props: Omit<ImageShaderProps, \"tx\" | \"ty\" | \"fm\" | \"mm\" | \"fit\" | \"image\">\n): SkRect | undefined => {\n  const { x, y, width, height } = props;\n  if (props.rect) {\n    return props.rect;\n  } else if (\n    x !== undefined &&\n    y !== undefined &&\n    width !== undefined &&\n    height !== undefined\n  ) {\n    return Skia.XYWHRect(x, y, width, height);\n  } else {\n    return undefined;\n  }\n};\n"],"mappings":"AACA,SAASA,QAAT,QAAyB,qBAAzB;AAGA,SAASC,OAAT,QAAwB,QAAxB;AACA,SAASC,qBAAT,QAAsC,aAAtC;AAEA,OAAO,MAAMC,eAAe,GAAG,CAACC,MAAD,EAAiBC,SAAjB,KAA6C,CAC1E;EAAEC,UAAU,EAAEF,MAAM,CAACG;AAArB,CAD0E,EAE1E;EAAEC,UAAU,EAAEJ,MAAM,CAACK;AAArB,CAF0E,EAG1E,GAAGJ,SAHuE,EAI1E;EAAEC,UAAU,EAAE,CAACF,MAAM,CAACG;AAAtB,CAJ0E,EAK1E;EAAEC,UAAU,EAAE,CAACJ,MAAM,CAACK;AAAtB,CAL0E,CAArE;AAQP,OAAO,MAAMC,oBAAoB,GAAG,CAClCC,IADkC,WAG/B;EAAA,IADH;IAAEC,MAAF;IAAUC,SAAV;IAAqBC,IAArB;IAA2BC,KAA3B;IAAkC,GAAGV;EAArC,CACG;EACH,MAAMW,WAAW,GAAGL,IAAI,CAACM,MAAL,EAApB;EACAf,qBAAqB,CAACc,WAAD,EAAcX,SAAd,CAArB;EACA,OAAO;IACLO,MAAM,EAAEA,MAAM,CAACM,GAAP,CAAYC,KAAD,IAAWR,IAAI,CAACS,KAAL,CAAWD,KAAX,CAAtB,CADH;IAELN,SAAS,EAAEA,SAAF,aAAEA,SAAF,cAAEA,SAAF,GAAe,IAFnB;IAGLC,IAAI,EAAEd,QAAQ,CAACC,OAAO,CAACa,IAAD,aAACA,IAAD,cAACA,IAAD,GAAS,OAAT,CAAR,CAHT;IAILC,KAJK;IAKLC;EALK,CAAP;AAOD,CAbM;AAeP,OAAO,MAAMK,OAAO,GAAG,CACrBV,IADqB,EAErBW,KAFqB,KAGE;EACvB,MAAM;IAAEf,CAAF;IAAKE,CAAL;IAAQc,KAAR;IAAeC;EAAf,IAA0BF,KAAhC;;EACA,IAAIA,KAAK,CAACG,IAAV,EAAgB;IACd,OAAOH,KAAK,CAACG,IAAb;EACD,CAFD,MAEO,IACLlB,CAAC,KAAKmB,SAAN,IACAjB,CAAC,KAAKiB,SADN,IAEAH,KAAK,KAAKG,SAFV,IAGAF,MAAM,KAAKE,SAJN,EAKL;IACA,OAAOf,IAAI,CAACgB,QAAL,CAAcpB,CAAd,EAAiBE,CAAjB,EAAoBc,KAApB,EAA2BC,MAA3B,CAAP;EACD,CAPM,MAOA;IACL,OAAOE,SAAP;EACD;AACF,CAjBM"}

package/lib/module/dom/types/Common.d.ts

@@ -1,5 +1,5 @@
 import type { ReactNode } from "react";
-import type { BlendMode, Color, PaintStyle, SkMatrix, SkPaint, SkPath, SkRect, SkRRect, StrokeCap, StrokeJoin, Transforms2d, Vector } from "../../skia/types";
+import type { BlendMode, Color, PaintStyle, SkMatrix, SkPaint, SkPath, SkRect, SkRRect, StrokeCap, StrokeJoin, Transforms3d, Vector } from "../../skia/types";
 export type SkEnum<T> = Uncapitalize<keyof T extends string ? keyof T : never>;
 export type PathDef = string | SkPath;
 export type ClipDef = SkRRect | SkRect | PathDef;
@@ -34,9 +34,9 @@ export interface ScalarCircleDef {
 }
 export type CircleDef = PointCircleDef | ScalarCircleDef;
 export interface TransformProps {
-    transform?: Transforms2d;
+    transform?: Transforms3d;
     origin?: Vector;
-    matrix?: SkMatrix;
+    matrix?: SkMatrix | number[];
 }
 export interface PaintProps extends ChildrenProps {
     color?: Color;

package/lib/module/dom/types/Common.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["Common.ts"],"sourcesContent":["import type { ReactNode } from \"react\";\n\nimport type {\n  BlendMode,\n  Color,\n  PaintStyle,\n  SkMatrix,\n  SkPaint,\n  SkPath,\n  SkRect,\n  SkRRect,\n  StrokeCap,\n  StrokeJoin,\n  Transforms2d,\n  Vector,\n} from \"../../skia/types\";\n\nexport type SkEnum<T> = Uncapitalize<keyof T extends string ? keyof T : never>;\n\nexport type PathDef = string | SkPath;\n\nexport type ClipDef = SkRRect | SkRect | PathDef;\n\nexport type Fit =\n  | \"cover\"\n  | \"contain\"\n  | \"fill\"\n  | \"fitHeight\"\n  | \"fitWidth\"\n  | \"none\"\n  | \"scaleDown\";\n\nexport type Radius = number | Vector;\n\nexport interface ChildrenProps {\n  children?: ReactNode | ReactNode[];\n}\n\nexport interface RectCtor {\n  x?: number;\n  y?: number;\n  width: number;\n  height: number;\n}\n\nexport interface RRectCtor extends RectCtor {\n  r?: Radius;\n}\n\nexport type RectDef = RectCtor | { rect: SkRect };\nexport type RRectDef = RRectCtor | { rect: SkRRect };\n\nexport interface PointCircleDef {\n  c?: Vector;\n  r: number;\n}\n\nexport interface ScalarCircleDef {\n  cx: number;\n  cy: number;\n  r: number;\n}\n\nexport type CircleDef = PointCircleDef | ScalarCircleDef;\n\nexport interface TransformProps {\n  transform?: Transforms2d;\n  origin?: Vector;\n  matrix?: SkMatrix;\n}\n\nexport interface PaintProps extends ChildrenProps {\n  color?: Color;\n  strokeWidth?: number;\n  blendMode?: SkEnum<typeof BlendMode>;\n  style?: SkEnum<typeof PaintStyle>;\n  strokeJoin?: SkEnum<typeof StrokeJoin>;\n  strokeCap?: SkEnum<typeof StrokeCap>;\n  strokeMiter?: number;\n  opacity?: number;\n  antiAlias?: boolean;\n  dither?: boolean;\n}\n\nexport interface GroupProps extends PaintProps, TransformProps {\n  clip?: ClipDef;\n  invertClip?: boolean;\n  layer?: SkPaint | boolean;\n}\n"],"mappings":""}
+{"version":3,"names":[],"sources":["Common.ts"],"sourcesContent":["import type { ReactNode } from \"react\";\n\nimport type {\n  BlendMode,\n  Color,\n  PaintStyle,\n  SkMatrix,\n  SkPaint,\n  SkPath,\n  SkRect,\n  SkRRect,\n  StrokeCap,\n  StrokeJoin,\n  Transforms3d,\n  Vector,\n} from \"../../skia/types\";\n\nexport type SkEnum<T> = Uncapitalize<keyof T extends string ? keyof T : never>;\n\nexport type PathDef = string | SkPath;\n\nexport type ClipDef = SkRRect | SkRect | PathDef;\n\nexport type Fit =\n  | \"cover\"\n  | \"contain\"\n  | \"fill\"\n  | \"fitHeight\"\n  | \"fitWidth\"\n  | \"none\"\n  | \"scaleDown\";\n\nexport type Radius = number | Vector;\n\nexport interface ChildrenProps {\n  children?: ReactNode | ReactNode[];\n}\n\nexport interface RectCtor {\n  x?: number;\n  y?: number;\n  width: number;\n  height: number;\n}\n\nexport interface RRectCtor extends RectCtor {\n  r?: Radius;\n}\n\nexport type RectDef = RectCtor | { rect: SkRect };\nexport type RRectDef = RRectCtor | { rect: SkRRect };\n\nexport interface PointCircleDef {\n  c?: Vector;\n  r: number;\n}\n\nexport interface ScalarCircleDef {\n  cx: number;\n  cy: number;\n  r: number;\n}\n\nexport type CircleDef = PointCircleDef | ScalarCircleDef;\n\nexport interface TransformProps {\n  transform?: Transforms3d;\n  origin?: Vector;\n  matrix?: SkMatrix | number[];\n}\n\nexport interface PaintProps extends ChildrenProps {\n  color?: Color;\n  strokeWidth?: number;\n  blendMode?: SkEnum<typeof BlendMode>;\n  style?: SkEnum<typeof PaintStyle>;\n  strokeJoin?: SkEnum<typeof StrokeJoin>;\n  strokeCap?: SkEnum<typeof StrokeCap>;\n  strokeMiter?: number;\n  opacity?: number;\n  antiAlias?: boolean;\n  dither?: boolean;\n}\n\nexport interface GroupProps extends PaintProps, TransformProps {\n  clip?: ClipDef;\n  invertClip?: boolean;\n  layer?: SkPaint | boolean;\n}\n"],"mappings":""}

package/lib/module/external/reanimated/interpolators.js

@@ -1,17 +1,23 @@
-import { useMemo } from "react";
+import { useMemo, useRef } from "react";
 import { interpolatePaths, interpolateVector } from "../../animation";
 import { Skia } from "../../skia";
 import { useAnimatedReaction, useFrameCallback, useSharedValue } from "./moduleWrapper";
 export const notifyChange = value => {
-  "worklet"; // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  "worklet";
 
-  value._value = value.value;
+  if (_WORKLET) {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    value._value = value.value;
+  }
 };
 export const useClock = () => {
   const clock = useSharedValue(0);
-  useFrameCallback(info => {
+  const callback = useRef(info => {
+    "worklet";
+
     clock.value = info.timeSinceFirstFrame;
-  });
+  }).current;
+  useFrameCallback(callback);
   return clock;
 };
 /**

package/lib/module/external/reanimated/interpolators.js.map

@@ -1 +1 @@
-{"version":3,"names":["useMemo","interpolatePaths","interpolateVector","Skia","useAnimatedReaction","useFrameCallback","useSharedValue","notifyChange","value","_value","useClock","clock","info","timeSinceFirstFrame","useInterpolator","factory","interpolator","input","output","options","init","result","val","usePathInterpolation","outputRange","Path","Make","useVectorInterpolation","Point"],"sources":["interpolators.ts"],"sourcesContent":["import type { ExtrapolationType, SharedValue } from \"react-native-reanimated\";\nimport { useMemo } from \"react\";\n\nimport type { SkPath, SkPoint } from \"../../skia/types\";\nimport { interpolatePaths, interpolateVector } from \"../../animation\";\nimport { Skia } from \"../../skia\";\n\nimport {\n  useAnimatedReaction,\n  useFrameCallback,\n  useSharedValue,\n} from \"./moduleWrapper\";\n\nexport const notifyChange = (value: SharedValue<unknown>) => {\n  \"worklet\";\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  (value as any)._value = value.value;\n};\n\nexport const useClock = () => {\n  const clock = useSharedValue(0);\n  useFrameCallback((info) => {\n    clock.value = info.timeSinceFirstFrame;\n  });\n  return clock;\n};\n\n/**\n * @worklet\n */\ntype Interpolator<T> = (\n  value: number,\n  input: number[],\n  output: T[],\n  options: ExtrapolationType,\n  result: T\n) => T;\n\nconst useInterpolator = <T>(\n  factory: () => T,\n  value: SharedValue<number>,\n  interpolator: Interpolator<T>,\n  input: number[],\n  output: T[],\n  options?: ExtrapolationType\n) => {\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  const init = useMemo(() => factory(), []);\n  const result = useSharedValue(init);\n  useAnimatedReaction(\n    () => value.value,\n    (val) => {\n      result.value = interpolator(val, input, output, options, result.value);\n      notifyChange(result);\n    },\n    [input, output, options]\n  );\n  return result;\n};\n\nexport const usePathInterpolation = (\n  value: SharedValue<number>,\n  input: number[],\n  outputRange: SkPath[],\n  options?: ExtrapolationType\n) =>\n  useInterpolator(\n    () => Skia.Path.Make(),\n    value,\n    interpolatePaths,\n    input,\n    outputRange,\n    options\n  );\n\nexport const useVectorInterpolation = (\n  value: SharedValue<number>,\n  input: number[],\n  outputRange: SkPoint[],\n  options?: ExtrapolationType\n) =>\n  useInterpolator(\n    () => Skia.Point(0, 0),\n    value,\n    interpolateVector,\n    input,\n    outputRange,\n    options\n  );\n"],"mappings":"AACA,SAASA,OAAT,QAAwB,OAAxB;AAGA,SAASC,gBAAT,EAA2BC,iBAA3B,QAAoD,iBAApD;AACA,SAASC,IAAT,QAAqB,YAArB;AAEA,SACEC,mBADF,EAEEC,gBAFF,EAGEC,cAHF,QAIO,iBAJP;AAMA,OAAO,MAAMC,YAAY,GAAIC,KAAD,IAAiC;EAC3D,UAD2D,CAE3D;;EACCA,KAAD,CAAeC,MAAf,GAAwBD,KAAK,CAACA,KAA9B;AACD,CAJM;AAMP,OAAO,MAAME,QAAQ,GAAG,MAAM;EAC5B,MAAMC,KAAK,GAAGL,cAAc,CAAC,CAAD,CAA5B;EACAD,gBAAgB,CAAEO,IAAD,IAAU;IACzBD,KAAK,CAACH,KAAN,GAAcI,IAAI,CAACC,mBAAnB;EACD,CAFe,CAAhB;EAGA,OAAOF,KAAP;AACD,CANM;AAQP;AACA;AACA;;AASA,MAAMG,eAAe,GAAG,CACtBC,OADsB,EAEtBP,KAFsB,EAGtBQ,YAHsB,EAItBC,KAJsB,EAKtBC,MALsB,EAMtBC,OANsB,KAOnB;EACH;EACA,MAAMC,IAAI,GAAGpB,OAAO,CAAC,MAAMe,OAAO,EAAd,EAAkB,EAAlB,CAApB;EACA,MAAMM,MAAM,GAAGf,cAAc,CAACc,IAAD,CAA7B;EACAhB,mBAAmB,CACjB,MAAMI,KAAK,CAACA,KADK,EAEhBc,GAAD,IAAS;IACPD,MAAM,CAACb,KAAP,GAAeQ,YAAY,CAACM,GAAD,EAAML,KAAN,EAAaC,MAAb,EAAqBC,OAArB,EAA8BE,MAAM,CAACb,KAArC,CAA3B;IACAD,YAAY,CAACc,MAAD,CAAZ;EACD,CALgB,EAMjB,CAACJ,KAAD,EAAQC,MAAR,EAAgBC,OAAhB,CANiB,CAAnB;EAQA,OAAOE,MAAP;AACD,CApBD;;AAsBA,OAAO,MAAME,oBAAoB,GAAG,CAClCf,KADkC,EAElCS,KAFkC,EAGlCO,WAHkC,EAIlCL,OAJkC,KAMlCL,eAAe,CACb,MAAMX,IAAI,CAACsB,IAAL,CAAUC,IAAV,EADO,EAEblB,KAFa,EAGbP,gBAHa,EAIbgB,KAJa,EAKbO,WALa,EAMbL,OANa,CANV;AAeP,OAAO,MAAMQ,sBAAsB,GAAG,CACpCnB,KADoC,EAEpCS,KAFoC,EAGpCO,WAHoC,EAIpCL,OAJoC,KAMpCL,eAAe,CACb,MAAMX,IAAI,CAACyB,KAAL,CAAW,CAAX,EAAc,CAAd,CADO,EAEbpB,KAFa,EAGbN,iBAHa,EAIbe,KAJa,EAKbO,WALa,EAMbL,OANa,CANV"}
+{"version":3,"names":["useMemo","useRef","interpolatePaths","interpolateVector","Skia","useAnimatedReaction","useFrameCallback","useSharedValue","notifyChange","value","_WORKLET","_value","useClock","clock","callback","info","timeSinceFirstFrame","current","useInterpolator","factory","interpolator","input","output","options","init","result","val","usePathInterpolation","outputRange","Path","Make","useVectorInterpolation","Point"],"sources":["interpolators.ts"],"sourcesContent":["import type {\n  ExtrapolationType,\n  FrameInfo,\n  SharedValue,\n} from \"react-native-reanimated\";\nimport { useMemo, useRef } from \"react\";\n\nimport type { SkPath, SkPoint } from \"../../skia/types\";\nimport { interpolatePaths, interpolateVector } from \"../../animation\";\nimport { Skia } from \"../../skia\";\n\nimport {\n  useAnimatedReaction,\n  useFrameCallback,\n  useSharedValue,\n} from \"./moduleWrapper\";\n\nexport const notifyChange = (value: SharedValue<unknown>) => {\n  \"worklet\";\n  if (_WORKLET) {\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    (value as any)._value = value.value;\n  }\n};\n\nexport const useClock = () => {\n  const clock = useSharedValue(0);\n  const callback = useRef((info: FrameInfo) => {\n    \"worklet\";\n    clock.value = info.timeSinceFirstFrame;\n  }).current;\n  useFrameCallback(callback);\n  return clock;\n};\n\n/**\n * @worklet\n */\ntype Interpolator<T> = (\n  value: number,\n  input: number[],\n  output: T[],\n  options: ExtrapolationType,\n  result: T\n) => T;\n\nconst useInterpolator = <T>(\n  factory: () => T,\n  value: SharedValue<number>,\n  interpolator: Interpolator<T>,\n  input: number[],\n  output: T[],\n  options?: ExtrapolationType\n) => {\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  const init = useMemo(() => factory(), []);\n  const result = useSharedValue(init);\n  useAnimatedReaction(\n    () => value.value,\n    (val) => {\n      result.value = interpolator(val, input, output, options, result.value);\n      notifyChange(result);\n    },\n    [input, output, options]\n  );\n  return result;\n};\n\nexport const usePathInterpolation = (\n  value: SharedValue<number>,\n  input: number[],\n  outputRange: SkPath[],\n  options?: ExtrapolationType\n) =>\n  useInterpolator(\n    () => Skia.Path.Make(),\n    value,\n    interpolatePaths,\n    input,\n    outputRange,\n    options\n  );\n\nexport const useVectorInterpolation = (\n  value: SharedValue<number>,\n  input: number[],\n  outputRange: SkPoint[],\n  options?: ExtrapolationType\n) =>\n  useInterpolator(\n    () => Skia.Point(0, 0),\n    value,\n    interpolateVector,\n    input,\n    outputRange,\n    options\n  );\n"],"mappings":"AAKA,SAASA,OAAT,EAAkBC,MAAlB,QAAgC,OAAhC;AAGA,SAASC,gBAAT,EAA2BC,iBAA3B,QAAoD,iBAApD;AACA,SAASC,IAAT,QAAqB,YAArB;AAEA,SACEC,mBADF,EAEEC,gBAFF,EAGEC,cAHF,QAIO,iBAJP;AAMA,OAAO,MAAMC,YAAY,GAAIC,KAAD,IAAiC;EAC3D;;EACA,IAAIC,QAAJ,EAAc;IACZ;IACCD,KAAD,CAAeE,MAAf,GAAwBF,KAAK,CAACA,KAA9B;EACD;AACF,CANM;AAQP,OAAO,MAAMG,QAAQ,GAAG,MAAM;EAC5B,MAAMC,KAAK,GAAGN,cAAc,CAAC,CAAD,CAA5B;EACA,MAAMO,QAAQ,GAAGb,MAAM,CAAEc,IAAD,IAAqB;IAC3C;;IACAF,KAAK,CAACJ,KAAN,GAAcM,IAAI,CAACC,mBAAnB;EACD,CAHsB,CAAN,CAGdC,OAHH;EAIAX,gBAAgB,CAACQ,QAAD,CAAhB;EACA,OAAOD,KAAP;AACD,CARM;AAUP;AACA;AACA;;AASA,MAAMK,eAAe,GAAG,CACtBC,OADsB,EAEtBV,KAFsB,EAGtBW,YAHsB,EAItBC,KAJsB,EAKtBC,MALsB,EAMtBC,OANsB,KAOnB;EACH;EACA,MAAMC,IAAI,GAAGxB,OAAO,CAAC,MAAMmB,OAAO,EAAd,EAAkB,EAAlB,CAApB;EACA,MAAMM,MAAM,GAAGlB,cAAc,CAACiB,IAAD,CAA7B;EACAnB,mBAAmB,CACjB,MAAMI,KAAK,CAACA,KADK,EAEhBiB,GAAD,IAAS;IACPD,MAAM,CAAChB,KAAP,GAAeW,YAAY,CAACM,GAAD,EAAML,KAAN,EAAaC,MAAb,EAAqBC,OAArB,EAA8BE,MAAM,CAAChB,KAArC,CAA3B;IACAD,YAAY,CAACiB,MAAD,CAAZ;EACD,CALgB,EAMjB,CAACJ,KAAD,EAAQC,MAAR,EAAgBC,OAAhB,CANiB,CAAnB;EAQA,OAAOE,MAAP;AACD,CApBD;;AAsBA,OAAO,MAAME,oBAAoB,GAAG,CAClClB,KADkC,EAElCY,KAFkC,EAGlCO,WAHkC,EAIlCL,OAJkC,KAMlCL,eAAe,CACb,MAAMd,IAAI,CAACyB,IAAL,CAAUC,IAAV,EADO,EAEbrB,KAFa,EAGbP,gBAHa,EAIbmB,KAJa,EAKbO,WALa,EAMbL,OANa,CANV;AAeP,OAAO,MAAMQ,sBAAsB,GAAG,CACpCtB,KADoC,EAEpCY,KAFoC,EAGpCO,WAHoC,EAIpCL,OAJoC,KAMpCL,eAAe,CACb,MAAMd,IAAI,CAAC4B,KAAL,CAAW,CAAX,EAAc,CAAd,CADO,EAEbvB,KAFa,EAGbN,iBAHa,EAIbkB,KAJa,EAKbO,WALa,EAMbL,OANa,CANV"}

package/lib/module/renderer/Canvas.js

@@ -1,34 +1,37 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
-import React, { useEffect, useCallback, useMemo, forwardRef, useRef, useLayoutEffect } from "react";
-import { SkiaDomView, SkiaView } from "../views";
+import React, { useEffect, useCallback, useMemo, forwardRef, useRef } from "react";
+import { SkiaDomView, SkiaPictureView } from "../views";
 import { Skia } from "../skia/Skia";
 import { JsiDrawingContext } from "../dom/types";
-import { useValue } from "../values";
 import { SkiaRoot } from "./Reconciler";
 import { NATIVE_DOM } from "./HostComponents";
 import { isValue } from "./processors";
 export const useCanvasRef = () => useRef(null);
 
-const useOnSizeEvent = resultValue => {
-  const onSize = useValue({
-    width: 0,
-    height: 0
-  });
-  useLayoutEffect(() => {
-    if (!resultValue) {
-      return;
+const useOnSizeEvent = (resultValue, onLayout) => {
+  return useCallback(event => {
+    if (onLayout) {
+      onLayout(event);
     }
 
-    return onSize.addListener(newValue => {
-      if (isValue(resultValue)) {
-        resultValue.current = newValue;
-      } else {
-        resultValue.value = newValue;
-      }
-    });
-  }, [resultValue, onSize]);
-  return onSize;
+    const {
+      width,
+      height
+    } = event.nativeEvent.layout;
+
+    if (isValue(resultValue)) {
+      resultValue.current = {
+        width,
+        height
+      };
+    } else if (resultValue) {
+      resultValue.value = {
+        width,
+        height
+      };
+    }
+  }, [onLayout, resultValue]);
 };
 
 export const Canvas = /*#__PURE__*/forwardRef((_ref, forwardedRef) => {
@@ -39,9 +42,10 @@ export const Canvas = /*#__PURE__*/forwardRef((_ref, forwardedRef) => {
     mode,
     onTouch,
     onSize: _onSize,
+    onLayout: _onLayout,
     ...props
   } = _ref;
-  const onSize = useOnSizeEvent(_onSize);
+  const onLayout = useOnSizeEvent(_onSize, _onLayout);
   const innerRef = useCanvasRef();
   const ref = useCombinedRefs(forwardedRef, innerRef);
   const redraw = useCallback(() => {
@@ -79,23 +83,25 @@ export const Canvas = /*#__PURE__*/forwardRef((_ref, forwardedRef) => {
       style: style,
       root: root.dom,
       onTouch: onTouch,
-      onSize: onSize,
+      onLayout: onLayout,
       mode: mode,
       debug: debug
     }, props));
   } else {
-    return /*#__PURE__*/React.createElement(SkiaView // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    // This is for debugging
+    const recorder = Skia.PictureRecorder();
+    const canvas = recorder.beginRecording(Skia.XYWHRect(0, 0, 2_000_000, 2_000_000));
+    const ctx = new JsiDrawingContext(Skia, canvas);
+    root.dom.render(ctx);
+    const picture = recorder.finishRecordingAsPicture();
+    return /*#__PURE__*/React.createElement(SkiaPictureView // eslint-disable-next-line @typescript-eslint/no-explicit-any
     , _extends({
       ref: ref,
       style: style,
       mode: mode,
       debug: debug,
-      onSize: onSize,
-      onDraw: (canvas, info) => {
-        onTouch && onTouch(info.touches);
-        const ctx = new JsiDrawingContext(Skia, canvas);
-        root.dom.render(ctx);
-      }
+      picture: picture,
+      onLayout: onLayout
     }, props));
   }
 });

package/lib/module/renderer/Canvas.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useEffect","useCallback","useMemo","forwardRef","useRef","useLayoutEffect","SkiaDomView","SkiaView","Skia","JsiDrawingContext","useValue","SkiaRoot","NATIVE_DOM","isValue","useCanvasRef","useOnSizeEvent","resultValue","onSize","width","height","addListener","newValue","current","value","Canvas","forwardedRef","children","style","debug","mode","onTouch","_onSize","props","innerRef","ref","useCombinedRefs","redraw","getNativeId","id","nativeId","registerValues","values","root","render","unmount","dom","canvas","info","touches","ctx","refs","targetRef","forEach"],"sources":["Canvas.tsx"],"sourcesContent":["import React, {\n  useEffect,\n  useCallback,\n  useMemo,\n  forwardRef,\n  useRef,\n  useLayoutEffect,\n} from \"react\";\nimport type {\n  RefObject,\n  ReactNode,\n  MutableRefObject,\n  ForwardedRef,\n  FunctionComponent,\n} from \"react\";\n\nimport { SkiaDomView, SkiaView } from \"../views\";\nimport { Skia } from \"../skia/Skia\";\nimport type { TouchHandler, SkiaBaseViewProps } from \"../views\";\nimport type { SkiaValue } from \"../values/types\";\nimport { JsiDrawingContext } from \"../dom/types\";\nimport { useValue } from \"../values\";\n\nimport { SkiaRoot } from \"./Reconciler\";\nimport { NATIVE_DOM } from \"./HostComponents\";\nimport { isValue } from \"./processors\";\n\nexport const useCanvasRef = () => useRef<SkiaDomView>(null);\n\nexport interface CanvasProps extends SkiaBaseViewProps {\n  ref?: RefObject<SkiaDomView>;\n  children: ReactNode;\n  onTouch?: TouchHandler;\n}\n\nconst useOnSizeEvent = (resultValue: SkiaBaseViewProps[\"onSize\"]) => {\n  const onSize = useValue({\n    width: 0,\n    height: 0,\n  });\n\n  useLayoutEffect(() => {\n    if (!resultValue) {\n      return;\n    }\n    return onSize.addListener((newValue) => {\n      if (isValue(resultValue)) {\n        resultValue.current = newValue;\n      } else {\n        resultValue.value = newValue;\n      }\n    });\n  }, [resultValue, onSize]);\n\n  return onSize;\n};\n\nexport const Canvas = forwardRef<SkiaDomView, CanvasProps>(\n  (\n    { children, style, debug, mode, onTouch, onSize: _onSize, ...props },\n    forwardedRef\n  ) => {\n    const onSize = useOnSizeEvent(_onSize);\n    const innerRef = useCanvasRef();\n    const ref = useCombinedRefs(forwardedRef, innerRef);\n    const redraw = useCallback(() => {\n      innerRef.current?.redraw();\n    }, [innerRef]);\n    const getNativeId = useCallback(() => {\n      const id = innerRef.current?.nativeId ?? -1;\n      return id;\n    }, [innerRef]);\n\n    const registerValues = useCallback(\n      (values: Array<SkiaValue<unknown>>) => {\n        if (ref.current !== null) {\n          return ref.current.registerValues(values);\n        }\n        return () => {};\n      },\n      [ref]\n    );\n    const root = useMemo(\n      () => new SkiaRoot(Skia, registerValues, redraw, getNativeId),\n      [redraw, registerValues, getNativeId]\n    );\n\n    // Render effect\n    useEffect(() => {\n      root.render(children);\n    }, [children, root, redraw]);\n\n    useEffect(() => {\n      return () => {\n        root.unmount();\n      };\n    }, [root]);\n    if (NATIVE_DOM) {\n      return (\n        <SkiaDomView\n          ref={ref}\n          style={style}\n          root={root.dom}\n          onTouch={onTouch}\n          onSize={onSize}\n          mode={mode}\n          debug={debug}\n          {...props}\n        />\n      );\n    } else {\n      return (\n        <SkiaView\n          // eslint-disable-next-line @typescript-eslint/no-explicit-any\n          ref={ref as any}\n          style={style}\n          mode={mode}\n          debug={debug}\n          onSize={onSize}\n          onDraw={(canvas, info) => {\n            onTouch && onTouch(info.touches);\n            const ctx = new JsiDrawingContext(Skia, canvas);\n            root.dom.render(ctx);\n          }}\n          {...props}\n        />\n      );\n    }\n  }\n) as FunctionComponent<CanvasProps & React.RefAttributes<SkiaDomView>>;\n\n/**\n * Combines a list of refs into a single ref. This can be used to provide\n * both a forwarded ref and an internal ref keeping the same functionality\n * on both of the refs.\n * @param refs Array of refs to combine\n * @returns A single ref that can be used in a ref prop.\n */\nconst useCombinedRefs = <T,>(\n  ...refs: Array<MutableRefObject<T> | ForwardedRef<T>>\n) => {\n  const targetRef = React.useRef<T>(null);\n  React.useEffect(() => {\n    refs.forEach((ref) => {\n      if (ref) {\n        if (typeof ref === \"function\") {\n          ref(targetRef.current);\n        } else {\n          ref.current = targetRef.current;\n        }\n      }\n    });\n  }, [refs]);\n  return targetRef;\n};\n"],"mappings":"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"}
+{"version":3,"names":["React","useEffect","useCallback","useMemo","forwardRef","useRef","SkiaDomView","SkiaPictureView","Skia","JsiDrawingContext","SkiaRoot","NATIVE_DOM","isValue","useCanvasRef","useOnSizeEvent","resultValue","onLayout","event","width","height","nativeEvent","layout","current","value","Canvas","forwardedRef","children","style","debug","mode","onTouch","onSize","_onSize","_onLayout","props","innerRef","ref","useCombinedRefs","redraw","getNativeId","id","nativeId","registerValues","values","root","render","unmount","dom","recorder","PictureRecorder","canvas","beginRecording","XYWHRect","ctx","picture","finishRecordingAsPicture","refs","targetRef","forEach"],"sources":["Canvas.tsx"],"sourcesContent":["import React, {\n  useEffect,\n  useCallback,\n  useMemo,\n  forwardRef,\n  useRef,\n} from \"react\";\nimport type {\n  RefObject,\n  ReactNode,\n  MutableRefObject,\n  ForwardedRef,\n  FunctionComponent,\n} from \"react\";\nimport type { LayoutChangeEvent } from \"react-native\";\n\nimport { SkiaDomView, SkiaPictureView } from \"../views\";\nimport { Skia } from \"../skia/Skia\";\nimport type { TouchHandler, SkiaBaseViewProps } from \"../views\";\nimport type { SkiaValue } from \"../values/types\";\nimport { JsiDrawingContext } from \"../dom/types\";\n\nimport { SkiaRoot } from \"./Reconciler\";\nimport { NATIVE_DOM } from \"./HostComponents\";\nimport { isValue } from \"./processors\";\n\nexport const useCanvasRef = () => useRef<SkiaDomView>(null);\n\nexport interface CanvasProps extends SkiaBaseViewProps {\n  ref?: RefObject<SkiaDomView>;\n  children: ReactNode;\n  onTouch?: TouchHandler;\n}\n\nconst useOnSizeEvent = (\n  resultValue: SkiaBaseViewProps[\"onSize\"],\n  onLayout?: (event: LayoutChangeEvent) => void\n) => {\n  return useCallback(\n    (event: LayoutChangeEvent) => {\n      if (onLayout) {\n        onLayout(event);\n      }\n      const { width, height } = event.nativeEvent.layout;\n\n      if (isValue(resultValue)) {\n        resultValue.current = { width, height };\n      } else if (resultValue) {\n        resultValue.value = { width, height };\n      }\n    },\n    [onLayout, resultValue]\n  );\n};\n\nexport const Canvas = forwardRef<SkiaDomView, CanvasProps>(\n  (\n    {\n      children,\n      style,\n      debug,\n      mode,\n      onTouch,\n      onSize: _onSize,\n      onLayout: _onLayout,\n      ...props\n    },\n    forwardedRef\n  ) => {\n    const onLayout = useOnSizeEvent(_onSize, _onLayout);\n    const innerRef = useCanvasRef();\n    const ref = useCombinedRefs(forwardedRef, innerRef);\n    const redraw = useCallback(() => {\n      innerRef.current?.redraw();\n    }, [innerRef]);\n    const getNativeId = useCallback(() => {\n      const id = innerRef.current?.nativeId ?? -1;\n      return id;\n    }, [innerRef]);\n\n    const registerValues = useCallback(\n      (values: Array<SkiaValue<unknown>>) => {\n        if (ref.current !== null) {\n          return ref.current.registerValues(values);\n        }\n        return () => {};\n      },\n      [ref]\n    );\n    const root = useMemo(\n      () => new SkiaRoot(Skia, registerValues, redraw, getNativeId),\n      [redraw, registerValues, getNativeId]\n    );\n\n    // Render effect\n    useEffect(() => {\n      root.render(children);\n    }, [children, root, redraw]);\n\n    useEffect(() => {\n      return () => {\n        root.unmount();\n      };\n    }, [root]);\n    if (NATIVE_DOM) {\n      return (\n        <SkiaDomView\n          ref={ref}\n          style={style}\n          root={root.dom}\n          onTouch={onTouch}\n          onLayout={onLayout}\n          mode={mode}\n          debug={debug}\n          {...props}\n        />\n      );\n    } else {\n      // This is for debugging\n      const recorder = Skia.PictureRecorder();\n      const canvas = recorder.beginRecording(\n        Skia.XYWHRect(0, 0, 2_000_000, 2_000_000)\n      );\n      const ctx = new JsiDrawingContext(Skia, canvas);\n      root.dom.render(ctx);\n      const picture = recorder.finishRecordingAsPicture();\n      return (\n        <SkiaPictureView\n          // eslint-disable-next-line @typescript-eslint/no-explicit-any\n          ref={ref as any}\n          style={style}\n          mode={mode}\n          debug={debug}\n          picture={picture}\n          onLayout={onLayout}\n          {...props}\n        />\n      );\n    }\n  }\n) as FunctionComponent<CanvasProps & React.RefAttributes<SkiaDomView>>;\n\n/**\n * Combines a list of refs into a single ref. This can be used to provide\n * both a forwarded ref and an internal ref keeping the same functionality\n * on both of the refs.\n * @param refs Array of refs to combine\n * @returns A single ref that can be used in a ref prop.\n */\nconst useCombinedRefs = <T,>(\n  ...refs: Array<MutableRefObject<T> | ForwardedRef<T>>\n) => {\n  const targetRef = React.useRef<T>(null);\n  React.useEffect(() => {\n    refs.forEach((ref) => {\n      if (ref) {\n        if (typeof ref === \"function\") {\n          ref(targetRef.current);\n        } else {\n          ref.current = targetRef.current;\n        }\n      }\n    });\n  }, [refs]);\n  return targetRef;\n};\n"],"mappings":"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"}

package/lib/module/renderer/components/Drawing.d.ts

@@ -1,3 +1,8 @@
 import React from "react";
 import type { CustomDrawingNodeProps } from "../../dom/types";
+/**
+ * @deprecated If you are looking to use the Skia imperative API, you can use:
+ * The picture API: https://shopify.github.io/react-native-skia/docs/shapes/pictures/
+ * The offscreen API: https://shopify.github.io/react-native-skia/docs/animations/textures
+ */
 export declare const Drawing: (props: CustomDrawingNodeProps) => React.JSX.Element;