@shopify/react-native-skia 1.7.7 → 1.8.0

package/lib/module/dom/nodes/datatypes/Rect.js

@@ -1,20 +1,27 @@
-"worklet";
-
 /* eslint-disable @typescript-eslint/no-explicit-any */
+
 import { processRadius } from "./Radius";
 export const isEdge = (pos, b) => {
+  "worklet";
+
   return pos.x === b.x || pos.y === b.y || pos.x === b.width || pos.y === b.height;
 };
 
 // We have an issue to check property existence on JSI backed instances
 const isRRectCtor = def => {
+  "worklet";
+
   return def.rect === undefined;
 };
 // We have an issue to check property existence on JSI backed instances
 const isRectCtor = def => {
+  "worklet";
+
   return def.rect === undefined;
 };
 export const processRect = (Skia, def) => {
+  "worklet";
+
   if (isRectCtor(def)) {
     var _def$x, _def$y;
     return Skia.XYWHRect((_def$x = def.x) !== null && _def$x !== void 0 ? _def$x : 0, (_def$y = def.y) !== null && _def$y !== void 0 ? _def$y : 0, def.width, def.height);
@@ -23,6 +30,8 @@ export const processRect = (Skia, def) => {
   }
 };
 export const processRRect = (Skia, def) => {
+  "worklet";
+
   if (isRRectCtor(def)) {
     var _def$r, _def$x2, _def$y2;
     const r = processRadius(Skia, (_def$r = def.r) !== null && _def$r !== void 0 ? _def$r : 0);
@@ -32,9 +41,13 @@ export const processRRect = (Skia, def) => {
   }
 };
 export const inflate = (Skia, box, dx, dy, tx = 0, ty = 0) => {
+  "worklet";
+
   return Skia.RRectXY(Skia.XYWHRect(box.rect.x - dx + tx, box.rect.y - dy + ty, box.rect.width + 2 * dx, box.rect.height + 2 * dy), box.rx + dx, box.ry + dy);
 };
 export const deflate = (Skia, box, dx, dy, tx = 0, ty = 0) => {
+  "worklet";
+
   return inflate(Skia, box, -dx, -dy, tx, ty);
 };
 //# sourceMappingURL=Rect.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["processRadius","isEdge","pos","b","x","y","width","height","isRRectCtor","def","rect","undefined","isRectCtor","processRect","Skia","_def$x","_def$y","XYWHRect","processRRect","_def$r","_def$x2","_def$y2","r","RRectXY","inflate","box","dx","dy","tx","ty","rx","ry","deflate"],"sources":["Rect.ts"],"sourcesContent":["\"worklet\";\n\n/* eslint-disable @typescript-eslint/no-explicit-any */\nimport type { Skia, SkRect, SkRRect, Vector } from \"../../../skia/types\";\nimport type { RectCtor, RectDef, RRectCtor, RRectDef } from \"../../types\";\n\nimport { processRadius } from \"./Radius\";\n\nexport const isEdge = (pos: Vector, b: SkRect) => {\n  return (\n    pos.x === b.x || pos.y === b.y || pos.x === b.width || pos.y === b.height\n  );\n};\n\n// We have an issue to check property existence on JSI backed instances\nconst isRRectCtor = (def: RRectDef): def is RRectCtor => {\n  return (def as any).rect === undefined;\n};\n// We have an issue to check property existence on JSI backed instances\nconst isRectCtor = (def: RectDef): def is RectCtor => {\n  return (def as any).rect === undefined;\n};\n\nexport const processRect = (Skia: Skia, def: RectDef) => {\n  if (isRectCtor(def)) {\n    return Skia.XYWHRect(def.x ?? 0, def.y ?? 0, def.width, def.height);\n  } else {\n    return def.rect;\n  }\n};\n\nexport const processRRect = (Skia: Skia, def: RRectDef) => {\n  if (isRRectCtor(def)) {\n    const r = processRadius(Skia, def.r ?? 0);\n    return Skia.RRectXY(\n      Skia.XYWHRect(def.x ?? 0, def.y ?? 0, def.width, def.height),\n      r.x,\n      r.y\n    );\n  } else {\n    return def.rect;\n  }\n};\n\nexport const inflate = (\n  Skia: Skia,\n  box: SkRRect,\n  dx: number,\n  dy: number,\n  tx = 0,\n  ty = 0\n) => {\n  return Skia.RRectXY(\n    Skia.XYWHRect(\n      box.rect.x - dx + tx,\n      box.rect.y - dy + ty,\n      box.rect.width + 2 * dx,\n      box.rect.height + 2 * dy\n    ),\n    box.rx + dx,\n    box.ry + dy\n  );\n};\n\nexport const deflate = (\n  Skia: Skia,\n  box: SkRRect,\n  dx: number,\n  dy: number,\n  tx = 0,\n  ty = 0\n) => {\n  return inflate(Skia, box, -dx, -dy, tx, ty);\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["processRadius","isEdge","pos","b","x","y","width","height","isRRectCtor","def","rect","undefined","isRectCtor","processRect","Skia","_def$x","_def$y","XYWHRect","processRRect","_def$r","_def$x2","_def$y2","r","RRectXY","inflate","box","dx","dy","tx","ty","rx","ry","deflate"],"sources":["Rect.ts"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\nimport type { Skia, SkRect, SkRRect, Vector } from \"../../../skia/types\";\nimport type { RectCtor, RectDef, RRectCtor, RRectDef } from \"../../types\";\n\nimport { processRadius } from \"./Radius\";\n\nexport const isEdge = (pos: Vector, b: SkRect) => {\n  \"worklet\";\n  return (\n    pos.x === b.x || pos.y === b.y || pos.x === b.width || pos.y === b.height\n  );\n};\n\n// We have an issue to check property existence on JSI backed instances\nconst isRRectCtor = (def: RRectDef): def is RRectCtor => {\n  \"worklet\";\n  return (def as any).rect === undefined;\n};\n// We have an issue to check property existence on JSI backed instances\nconst isRectCtor = (def: RectDef): def is RectCtor => {\n  \"worklet\";\n  return (def as any).rect === undefined;\n};\n\nexport const processRect = (Skia: Skia, def: RectDef) => {\n  \"worklet\";\n  if (isRectCtor(def)) {\n    return Skia.XYWHRect(def.x ?? 0, def.y ?? 0, def.width, def.height);\n  } else {\n    return def.rect;\n  }\n};\n\nexport const processRRect = (Skia: Skia, def: RRectDef) => {\n  \"worklet\";\n  if (isRRectCtor(def)) {\n    const r = processRadius(Skia, def.r ?? 0);\n    return Skia.RRectXY(\n      Skia.XYWHRect(def.x ?? 0, def.y ?? 0, def.width, def.height),\n      r.x,\n      r.y\n    );\n  } else {\n    return def.rect;\n  }\n};\n\nexport const inflate = (\n  Skia: Skia,\n  box: SkRRect,\n  dx: number,\n  dy: number,\n  tx = 0,\n  ty = 0\n) => {\n  \"worklet\";\n  return Skia.RRectXY(\n    Skia.XYWHRect(\n      box.rect.x - dx + tx,\n      box.rect.y - dy + ty,\n      box.rect.width + 2 * dx,\n      box.rect.height + 2 * dy\n    ),\n    box.rx + dx,\n    box.ry + dy\n  );\n};\n\nexport const deflate = (\n  Skia: Skia,\n  box: SkRRect,\n  dx: number,\n  dy: number,\n  tx = 0,\n  ty = 0\n) => {\n  \"worklet\";\n  return inflate(Skia, box, -dx, -dy, tx, ty);\n};\n"],"mappings":"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","ignoreList":[]}

package/lib/module/dom/nodes/datatypes/Transform.js

@@ -1,7 +1,7 @@
-"worklet";
-
 import { processTransform } from "../../../skia/types";
 export const processTransformProps = (m3, props) => {
+  "worklet";
+
   const {
     transform,
     origin,
@@ -26,6 +26,8 @@ export const processTransformProps = (m3, props) => {
   }
 };
 export const processTransformProps2 = (Skia, props) => {
+  "worklet";
+
   const {
     transform,
     origin,

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

@@ -1 +1 @@
-{"version":3,"names":["processTransform","processTransformProps","m3","props","transform","origin","matrix","translate","x","y","concat","processTransformProps2","Skia","Matrix"],"sources":["Transform.ts"],"sourcesContent":["\"worklet\";\n\nimport type { TransformProps } from \"../../types\";\nimport type { Skia, SkMatrix } from \"../../../skia/types\";\nimport { processTransform } from \"../../../skia/types\";\n\nexport const processTransformProps = (m3: SkMatrix, props: TransformProps) => {\n  const { transform, origin, matrix } = props;\n  if (matrix) {\n    if (origin) {\n      m3.translate(origin.x, origin.y);\n      m3.concat(matrix);\n      m3.translate(-origin.x, -origin.y);\n    } else {\n      m3.concat(matrix);\n    }\n  } else if (transform) {\n    if (origin) {\n      m3.translate(origin.x, origin.y);\n    }\n    processTransform(m3, transform);\n    if (origin) {\n      m3.translate(-origin.x, -origin.y);\n    }\n  }\n};\n\nexport const processTransformProps2 = (Skia: Skia, props: TransformProps) => {\n  const { transform, origin, matrix } = props;\n  if (matrix) {\n    const m3 = Skia.Matrix();\n    if (origin) {\n      m3.translate(origin.x, origin.y);\n      m3.concat(matrix);\n      m3.translate(-origin.x, -origin.y);\n    } else {\n      m3.concat(matrix);\n    }\n    return m3;\n  } else if (transform) {\n    const m3 = Skia.Matrix();\n    if (origin) {\n      m3.translate(origin.x, origin.y);\n    }\n    processTransform(m3, transform);\n    if (origin) {\n      m3.translate(-origin.x, -origin.y);\n    }\n    return m3;\n  }\n  return null;\n};\n"],"mappings":"AAAA,SAAS;;AAIT,SAASA,gBAAgB,QAAQ,qBAAqB;AAEtD,OAAO,MAAMC,qBAAqB,GAAGA,CAACC,EAAY,EAAEC,KAAqB,KAAK;EAC5E,MAAM;IAAEC,SAAS;IAAEC,MAAM;IAAEC;EAAO,CAAC,GAAGH,KAAK;EAC3C,IAAIG,MAAM,EAAE;IACV,IAAID,MAAM,EAAE;MACVH,EAAE,CAACK,SAAS,CAACF,MAAM,CAACG,CAAC,EAAEH,MAAM,CAACI,CAAC,CAAC;MAChCP,EAAE,CAACQ,MAAM,CAACJ,MAAM,CAAC;MACjBJ,EAAE,CAACK,SAAS,CAAC,CAACF,MAAM,CAACG,CAAC,EAAE,CAACH,MAAM,CAACI,CAAC,CAAC;IACpC,CAAC,MAAM;MACLP,EAAE,CAACQ,MAAM,CAACJ,MAAM,CAAC;IACnB;EACF,CAAC,MAAM,IAAIF,SAAS,EAAE;IACpB,IAAIC,MAAM,EAAE;MACVH,EAAE,CAACK,SAAS,CAACF,MAAM,CAACG,CAAC,EAAEH,MAAM,CAACI,CAAC,CAAC;IAClC;IACAT,gBAAgB,CAACE,EAAE,EAAEE,SAAS,CAAC;IAC/B,IAAIC,MAAM,EAAE;MACVH,EAAE,CAACK,SAAS,CAAC,CAACF,MAAM,CAACG,CAAC,EAAE,CAACH,MAAM,CAACI,CAAC,CAAC;IACpC;EACF;AACF,CAAC;AAED,OAAO,MAAME,sBAAsB,GAAGA,CAACC,IAAU,EAAET,KAAqB,KAAK;EAC3E,MAAM;IAAEC,SAAS;IAAEC,MAAM;IAAEC;EAAO,CAAC,GAAGH,KAAK;EAC3C,IAAIG,MAAM,EAAE;IACV,MAAMJ,EAAE,GAAGU,IAAI,CAACC,MAAM,CAAC,CAAC;IACxB,IAAIR,MAAM,EAAE;MACVH,EAAE,CAACK,SAAS,CAACF,MAAM,CAACG,CAAC,EAAEH,MAAM,CAACI,CAAC,CAAC;MAChCP,EAAE,CAACQ,MAAM,CAACJ,MAAM,CAAC;MACjBJ,EAAE,CAACK,SAAS,CAAC,CAACF,MAAM,CAACG,CAAC,EAAE,CAACH,MAAM,CAACI,CAAC,CAAC;IACpC,CAAC,MAAM;MACLP,EAAE,CAACQ,MAAM,CAACJ,MAAM,CAAC;IACnB;IACA,OAAOJ,EAAE;EACX,CAAC,MAAM,IAAIE,SAAS,EAAE;IACpB,MAAMF,EAAE,GAAGU,IAAI,CAACC,MAAM,CAAC,CAAC;IACxB,IAAIR,MAAM,EAAE;MACVH,EAAE,CAACK,SAAS,CAACF,MAAM,CAACG,CAAC,EAAEH,MAAM,CAACI,CAAC,CAAC;IAClC;IACAT,gBAAgB,CAACE,EAAE,EAAEE,SAAS,CAAC;IAC/B,IAAIC,MAAM,EAAE;MACVH,EAAE,CAACK,SAAS,CAAC,CAACF,MAAM,CAACG,CAAC,EAAE,CAACH,MAAM,CAACI,CAAC,CAAC;IACpC;IACA,OAAOP,EAAE;EACX;EACA,OAAO,IAAI;AACb,CAAC","ignoreList":[]}
+{"version":3,"names":["processTransform","processTransformProps","m3","props","transform","origin","matrix","translate","x","y","concat","processTransformProps2","Skia","Matrix"],"sources":["Transform.ts"],"sourcesContent":["import type { TransformProps } from \"../../types\";\nimport type { Skia, SkMatrix } from \"../../../skia/types\";\nimport { processTransform } from \"../../../skia/types\";\n\nexport const processTransformProps = (m3: SkMatrix, props: TransformProps) => {\n  \"worklet\";\n\n  const { transform, origin, matrix } = props;\n  if (matrix) {\n    if (origin) {\n      m3.translate(origin.x, origin.y);\n      m3.concat(matrix);\n      m3.translate(-origin.x, -origin.y);\n    } else {\n      m3.concat(matrix);\n    }\n  } else if (transform) {\n    if (origin) {\n      m3.translate(origin.x, origin.y);\n    }\n    processTransform(m3, transform);\n    if (origin) {\n      m3.translate(-origin.x, -origin.y);\n    }\n  }\n};\n\nexport const processTransformProps2 = (Skia: Skia, props: TransformProps) => {\n  \"worklet\";\n\n  const { transform, origin, matrix } = props;\n  if (matrix) {\n    const m3 = Skia.Matrix();\n    if (origin) {\n      m3.translate(origin.x, origin.y);\n      m3.concat(matrix);\n      m3.translate(-origin.x, -origin.y);\n    } else {\n      m3.concat(matrix);\n    }\n    return m3;\n  } else if (transform) {\n    const m3 = Skia.Matrix();\n    if (origin) {\n      m3.translate(origin.x, origin.y);\n    }\n    processTransform(m3, transform);\n    if (origin) {\n      m3.translate(-origin.x, -origin.y);\n    }\n    return m3;\n  }\n  return null;\n};\n"],"mappings":"AAEA,SAASA,gBAAgB,QAAQ,qBAAqB;AAEtD,OAAO,MAAMC,qBAAqB,GAAGA,CAACC,EAAY,EAAEC,KAAqB,KAAK;EAC5E,SAAS;;EAET,MAAM;IAAEC,SAAS;IAAEC,MAAM;IAAEC;EAAO,CAAC,GAAGH,KAAK;EAC3C,IAAIG,MAAM,EAAE;IACV,IAAID,MAAM,EAAE;MACVH,EAAE,CAACK,SAAS,CAACF,MAAM,CAACG,CAAC,EAAEH,MAAM,CAACI,CAAC,CAAC;MAChCP,EAAE,CAACQ,MAAM,CAACJ,MAAM,CAAC;MACjBJ,EAAE,CAACK,SAAS,CAAC,CAACF,MAAM,CAACG,CAAC,EAAE,CAACH,MAAM,CAACI,CAAC,CAAC;IACpC,CAAC,MAAM;MACLP,EAAE,CAACQ,MAAM,CAACJ,MAAM,CAAC;IACnB;EACF,CAAC,MAAM,IAAIF,SAAS,EAAE;IACpB,IAAIC,MAAM,EAAE;MACVH,EAAE,CAACK,SAAS,CAACF,MAAM,CAACG,CAAC,EAAEH,MAAM,CAACI,CAAC,CAAC;IAClC;IACAT,gBAAgB,CAACE,EAAE,EAAEE,SAAS,CAAC;IAC/B,IAAIC,MAAM,EAAE;MACVH,EAAE,CAACK,SAAS,CAAC,CAACF,MAAM,CAACG,CAAC,EAAE,CAACH,MAAM,CAACI,CAAC,CAAC;IACpC;EACF;AACF,CAAC;AAED,OAAO,MAAME,sBAAsB,GAAGA,CAACC,IAAU,EAAET,KAAqB,KAAK;EAC3E,SAAS;;EAET,MAAM;IAAEC,SAAS;IAAEC,MAAM;IAAEC;EAAO,CAAC,GAAGH,KAAK;EAC3C,IAAIG,MAAM,EAAE;IACV,MAAMJ,EAAE,GAAGU,IAAI,CAACC,MAAM,CAAC,CAAC;IACxB,IAAIR,MAAM,EAAE;MACVH,EAAE,CAACK,SAAS,CAACF,MAAM,CAACG,CAAC,EAAEH,MAAM,CAACI,CAAC,CAAC;MAChCP,EAAE,CAACQ,MAAM,CAACJ,MAAM,CAAC;MACjBJ,EAAE,CAACK,SAAS,CAAC,CAACF,MAAM,CAACG,CAAC,EAAE,CAACH,MAAM,CAACI,CAAC,CAAC;IACpC,CAAC,MAAM;MACLP,EAAE,CAACQ,MAAM,CAACJ,MAAM,CAAC;IACnB;IACA,OAAOJ,EAAE;EACX,CAAC,MAAM,IAAIE,SAAS,EAAE;IACpB,MAAMF,EAAE,GAAGU,IAAI,CAACC,MAAM,CAAC,CAAC;IACxB,IAAIR,MAAM,EAAE;MACVH,EAAE,CAACK,SAAS,CAACF,MAAM,CAACG,CAAC,EAAEH,MAAM,CAACI,CAAC,CAAC;IAClC;IACAT,gBAAgB,CAACE,EAAE,EAAEE,SAAS,CAAC;IAC/B,IAAIC,MAAM,EAAE;MACVH,EAAE,CAACK,SAAS,CAAC,CAACF,MAAM,CAACG,CAAC,EAAE,CAACH,MAAM,CAACI,CAAC,CAAC;IACpC;IACA,OAAOP,EAAE;EACX;EACA,OAAO,IAAI;AACb,CAAC","ignoreList":[]}

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

@@ -1,7 +1,6 @@
 import type { GroupProps } from "./Common";
 import type { NodeType } from "./NodeType";
-import type { DeclarationContext } from "./DeclarationContext";
-import type { DrawingContext } from "./DrawingContext";
+import type { DeclarationContext } from "../../sksg/DeclarationContext";
 export interface Node<P> {
     type: NodeType;
     setProps(props: P): void;
@@ -17,6 +16,4 @@ export interface DeclarationNode<P> extends Node<P> {
     decorate(ctx: DeclarationContext): void;
     setInvalidate(invalidate: Invalidate): void;
 }
-export interface RenderNode<P extends GroupProps> extends Node<P> {
-    render(ctx: DrawingContext): void;
-}
+export type RenderNode<P extends GroupProps> = Node<P>;

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

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["Node.ts"],"sourcesContent":["import type { GroupProps } from \"./Common\";\nimport type { NodeType } from \"./NodeType\";\nimport type { DeclarationContext } from \"./DeclarationContext\";\nimport type { DrawingContext } from \"./DrawingContext\";\n\nexport interface Node<P> {\n  type: NodeType;\n\n  setProps(props: P): void;\n  setProp<K extends keyof P>(name: K, v: P[K]): boolean;\n  getProps(): P;\n\n  children(): Node<unknown>[];\n  addChild(child: Node<unknown>): void;\n  removeChild(child: Node<unknown>): void;\n  insertChildBefore(child: Node<unknown>, before: Node<unknown>): void;\n}\n\nexport type Invalidate = () => void;\n\nexport interface DeclarationNode<P> extends Node<P> {\n  //declarationType: DeclarationType;\n  decorate(ctx: DeclarationContext): void;\n\n  setInvalidate(invalidate: Invalidate): void;\n}\n\nexport interface RenderNode<P extends GroupProps> extends Node<P> {\n  render(ctx: DrawingContext): void;\n}\n"],"mappings":"","ignoreList":[]}
+{"version":3,"names":[],"sources":["Node.ts"],"sourcesContent":["import type { GroupProps } from \"./Common\";\nimport type { NodeType } from \"./NodeType\";\nimport type { DeclarationContext } from \"../../sksg/DeclarationContext\";\n\nexport interface Node<P> {\n  type: NodeType;\n\n  setProps(props: P): void;\n  setProp<K extends keyof P>(name: K, v: P[K]): boolean;\n  getProps(): P;\n\n  children(): Node<unknown>[];\n  addChild(child: Node<unknown>): void;\n  removeChild(child: Node<unknown>): void;\n  insertChildBefore(child: Node<unknown>, before: Node<unknown>): void;\n}\n\nexport type Invalidate = () => void;\n\nexport interface DeclarationNode<P> extends Node<P> {\n  //declarationType: DeclarationType;\n  decorate(ctx: DeclarationContext): void;\n\n  setInvalidate(invalidate: Invalidate): void;\n}\n\nexport type RenderNode<P extends GroupProps> = Node<P>;\n"],"mappings":"","ignoreList":[]}

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

@@ -1,5 +1,3 @@
-export * from "./DrawingContext";
-export * from "./DeclarationContext";
 export * from "./Node";
 export * from "./NodeType";
 export * from "./SkDOM";

package/lib/module/dom/types/index.js

@@ -1,5 +1,3 @@
-export * from "./DrawingContext";
-export * from "./DeclarationContext";
 export * from "./Node";
 export * from "./NodeType";
 export * from "./SkDOM";

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

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export * from \"./DrawingContext\";\nexport * from \"./DeclarationContext\";\nexport * from \"./Node\";\nexport * from \"./NodeType\";\nexport * from \"./SkDOM\";\nexport * from \"./Common\";\nexport * from \"./Drawings\";\nexport * from \"./ImageFilters\";\nexport * from \"./ColorFilters\";\nexport * from \"./MaskFilters\";\nexport * from \"./PathEffects\";\nexport * from \"./Shaders\";\nexport * from \"./Paragraph\";\n"],"mappings":"AAAA,cAAc,kBAAkB;AAChC,cAAc,sBAAsB;AACpC,cAAc,QAAQ;AACtB,cAAc,YAAY;AAC1B,cAAc,SAAS;AACvB,cAAc,UAAU;AACxB,cAAc,YAAY;AAC1B,cAAc,gBAAgB;AAC9B,cAAc,gBAAgB;AAC9B,cAAc,eAAe;AAC7B,cAAc,eAAe;AAC7B,cAAc,WAAW;AACzB,cAAc,aAAa","ignoreList":[]}
+{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export * from \"./Node\";\nexport * from \"./NodeType\";\nexport * from \"./SkDOM\";\nexport * from \"./Common\";\nexport * from \"./Drawings\";\nexport * from \"./ImageFilters\";\nexport * from \"./ColorFilters\";\nexport * from \"./MaskFilters\";\nexport * from \"./PathEffects\";\nexport * from \"./Shaders\";\nexport * from \"./Paragraph\";\n"],"mappings":"AAAA,cAAc,QAAQ;AACtB,cAAc,YAAY;AAC1B,cAAc,SAAS;AACvB,cAAc,UAAU;AACxB,cAAc,YAAY;AAC1B,cAAc,gBAAgB;AAC9B,cAAc,gBAAgB;AAC9B,cAAc,eAAe;AAC7B,cAAc,eAAe;AAC7B,cAAc,WAAW;AACzB,cAAc,aAAa","ignoreList":[]}

package/lib/module/headless/index.js

@@ -2,8 +2,7 @@
 // @ts-ignore
 
 import { JsiSkApi } from "../skia/web";
-import { SkiaRoot } from "../renderer/Reconciler";
-import { JsiDrawingContext } from "../dom/types";
+import { SkiaSGRoot } from "../sksg/Reconciler";
 export * from "../renderer/components";
 let Skia;
 export const makeOffscreenSurface = (width, height) => {
@@ -25,11 +24,10 @@ export const getSkiaExports = () => {
   };
 };
 export const drawOffscreen = (surface, element) => {
-  const root = new SkiaRoot(Skia, false);
+  const root = new SkiaSGRoot(Skia);
   root.render(element);
   const canvas = surface.getCanvas();
-  const ctx = new JsiDrawingContext(Skia, canvas);
-  root.dom.render(ctx);
+  root.drawOnCanvas(canvas);
   root.unmount();
   surface.flush();
   return surface.makeImageSnapshot();

package/lib/module/headless/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["JsiSkApi","SkiaRoot","JsiDrawingContext","Skia","makeOffscreenSurface","width","height","CanvasKit","surface","Surface","MakeOffscreen","Error","getSkiaExports","drawOffscreen","element","root","render","canvas","getCanvas","ctx","dom","unmount","flush","makeImageSnapshot"],"sources":["index.ts"],"sourcesContent":["// eslint-disable-next-line @typescript-eslint/ban-ts-comment\n// @ts-ignore\nimport CanvasKitInit from \"canvaskit-wasm/bin/full/canvaskit\";\nimport type { ReactNode } from \"react\";\n\nimport { JsiSkApi } from \"../skia/web\";\nimport { SkiaRoot } from \"../renderer/Reconciler\";\nimport { JsiDrawingContext } from \"../dom/types\";\nimport type { SkSurface } from \"../skia\";\n\nexport * from \"../renderer/components\";\n\nlet Skia: ReturnType<typeof JsiSkApi>;\n\nexport const makeOffscreenSurface = (width: number, height: number) => {\n  if (!Skia) {\n    Skia = JsiSkApi(CanvasKit);\n  }\n  const surface = Skia.Surface.MakeOffscreen(width, height);\n  if (surface === null) {\n    throw new Error(\"Couldn't create surface!\");\n  }\n  return surface;\n};\n\nexport const getSkiaExports = () => {\n  if (!Skia) {\n    Skia = JsiSkApi(CanvasKit);\n  }\n  return { Skia };\n};\n\nexport const drawOffscreen = (surface: SkSurface, element: ReactNode) => {\n  const root = new SkiaRoot(Skia, false);\n  root.render(element);\n  const canvas = surface.getCanvas();\n  const ctx = new JsiDrawingContext(Skia, canvas);\n  root.dom.render(ctx);\n  root.unmount();\n  surface.flush();\n  return surface.makeImageSnapshot();\n};\n"],"mappings":"AAAA;AACA;;AAIA,SAASA,QAAQ,QAAQ,aAAa;AACtC,SAASC,QAAQ,QAAQ,wBAAwB;AACjD,SAASC,iBAAiB,QAAQ,cAAc;AAGhD,cAAc,wBAAwB;AAEtC,IAAIC,IAAiC;AAErC,OAAO,MAAMC,oBAAoB,GAAGA,CAACC,KAAa,EAAEC,MAAc,KAAK;EACrE,IAAI,CAACH,IAAI,EAAE;IACTA,IAAI,GAAGH,QAAQ,CAACO,SAAS,CAAC;EAC5B;EACA,MAAMC,OAAO,GAAGL,IAAI,CAACM,OAAO,CAACC,aAAa,CAACL,KAAK,EAAEC,MAAM,CAAC;EACzD,IAAIE,OAAO,KAAK,IAAI,EAAE;IACpB,MAAM,IAAIG,KAAK,CAAC,0BAA0B,CAAC;EAC7C;EACA,OAAOH,OAAO;AAChB,CAAC;AAED,OAAO,MAAMI,cAAc,GAAGA,CAAA,KAAM;EAClC,IAAI,CAACT,IAAI,EAAE;IACTA,IAAI,GAAGH,QAAQ,CAACO,SAAS,CAAC;EAC5B;EACA,OAAO;IAAEJ;EAAK,CAAC;AACjB,CAAC;AAED,OAAO,MAAMU,aAAa,GAAGA,CAACL,OAAkB,EAAEM,OAAkB,KAAK;EACvE,MAAMC,IAAI,GAAG,IAAId,QAAQ,CAACE,IAAI,EAAE,KAAK,CAAC;EACtCY,IAAI,CAACC,MAAM,CAACF,OAAO,CAAC;EACpB,MAAMG,MAAM,GAAGT,OAAO,CAACU,SAAS,CAAC,CAAC;EAClC,MAAMC,GAAG,GAAG,IAAIjB,iBAAiB,CAACC,IAAI,EAAEc,MAAM,CAAC;EAC/CF,IAAI,CAACK,GAAG,CAACJ,MAAM,CAACG,GAAG,CAAC;EACpBJ,IAAI,CAACM,OAAO,CAAC,CAAC;EACdb,OAAO,CAACc,KAAK,CAAC,CAAC;EACf,OAAOd,OAAO,CAACe,iBAAiB,CAAC,CAAC;AACpC,CAAC","ignoreList":[]}
+{"version":3,"names":["JsiSkApi","SkiaSGRoot","Skia","makeOffscreenSurface","width","height","CanvasKit","surface","Surface","MakeOffscreen","Error","getSkiaExports","drawOffscreen","element","root","render","canvas","getCanvas","drawOnCanvas","unmount","flush","makeImageSnapshot"],"sources":["index.ts"],"sourcesContent":["// eslint-disable-next-line @typescript-eslint/ban-ts-comment\n// @ts-ignore\nimport CanvasKitInit from \"canvaskit-wasm/bin/full/canvaskit\";\nimport type { ReactNode } from \"react\";\n\nimport { JsiSkApi } from \"../skia/web\";\nimport type { SkSurface } from \"../skia\";\nimport { SkiaSGRoot } from \"../sksg/Reconciler\";\n\nexport * from \"../renderer/components\";\n\nlet Skia: ReturnType<typeof JsiSkApi>;\n\nexport const makeOffscreenSurface = (width: number, height: number) => {\n  if (!Skia) {\n    Skia = JsiSkApi(CanvasKit);\n  }\n  const surface = Skia.Surface.MakeOffscreen(width, height);\n  if (surface === null) {\n    throw new Error(\"Couldn't create surface!\");\n  }\n  return surface;\n};\n\nexport const getSkiaExports = () => {\n  if (!Skia) {\n    Skia = JsiSkApi(CanvasKit);\n  }\n  return { Skia };\n};\n\nexport const drawOffscreen = (surface: SkSurface, element: ReactNode) => {\n  const root = new SkiaSGRoot(Skia);\n  root.render(element);\n  const canvas = surface.getCanvas();\n  root.drawOnCanvas(canvas);\n  root.unmount();\n  surface.flush();\n  return surface.makeImageSnapshot();\n};\n"],"mappings":"AAAA;AACA;;AAIA,SAASA,QAAQ,QAAQ,aAAa;AAEtC,SAASC,UAAU,QAAQ,oBAAoB;AAE/C,cAAc,wBAAwB;AAEtC,IAAIC,IAAiC;AAErC,OAAO,MAAMC,oBAAoB,GAAGA,CAACC,KAAa,EAAEC,MAAc,KAAK;EACrE,IAAI,CAACH,IAAI,EAAE;IACTA,IAAI,GAAGF,QAAQ,CAACM,SAAS,CAAC;EAC5B;EACA,MAAMC,OAAO,GAAGL,IAAI,CAACM,OAAO,CAACC,aAAa,CAACL,KAAK,EAAEC,MAAM,CAAC;EACzD,IAAIE,OAAO,KAAK,IAAI,EAAE;IACpB,MAAM,IAAIG,KAAK,CAAC,0BAA0B,CAAC;EAC7C;EACA,OAAOH,OAAO;AAChB,CAAC;AAED,OAAO,MAAMI,cAAc,GAAGA,CAAA,KAAM;EAClC,IAAI,CAACT,IAAI,EAAE;IACTA,IAAI,GAAGF,QAAQ,CAACM,SAAS,CAAC;EAC5B;EACA,OAAO;IAAEJ;EAAK,CAAC;AACjB,CAAC;AAED,OAAO,MAAMU,aAAa,GAAGA,CAACL,OAAkB,EAAEM,OAAkB,KAAK;EACvE,MAAMC,IAAI,GAAG,IAAIb,UAAU,CAACC,IAAI,CAAC;EACjCY,IAAI,CAACC,MAAM,CAACF,OAAO,CAAC;EACpB,MAAMG,MAAM,GAAGT,OAAO,CAACU,SAAS,CAAC,CAAC;EAClCH,IAAI,CAACI,YAAY,CAACF,MAAM,CAAC;EACzBF,IAAI,CAACK,OAAO,CAAC,CAAC;EACdZ,OAAO,CAACa,KAAK,CAAC,CAAC;EACf,OAAOb,OAAO,CAACc,iBAAiB,CAAC,CAAC;AACpC,CAAC","ignoreList":[]}

package/lib/module/index.d.ts

@@ -2,6 +2,7 @@ import "./skia/NativeSetup";
 export { JsiSkImage } from "./skia/web/JsiSkImage";
 export * from "./renderer";
 export * from "./renderer/Canvas";
+export * from "./renderer/Canvas2";
 export * from "./renderer/Offscreen";
 export * from "./views";
 export * from "./skia";

package/lib/module/index.js

@@ -2,6 +2,7 @@ import "./skia/NativeSetup";
 export { JsiSkImage } from "./skia/web/JsiSkImage";
 export * from "./renderer";
 export * from "./renderer/Canvas";
+export * from "./renderer/Canvas2";
 export * from "./renderer/Offscreen";
 export * from "./views";
 export * from "./skia";

package/lib/module/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["JsiSkImage"],"sources":["index.ts"],"sourcesContent":["import \"./skia/NativeSetup\";\nexport { JsiSkImage } from \"./skia/web/JsiSkImage\";\nexport * from \"./renderer\";\nexport * from \"./renderer/Canvas\";\nexport * from \"./renderer/Offscreen\";\nexport * from \"./views\";\nexport * from \"./skia\";\nexport * from \"./external\";\nexport * from \"./animation\";\nexport * from \"./dom/types\";\nexport * from \"./dom/nodes\";\n"],"mappings":"AAAA,OAAO,oBAAoB;AAC3B,SAASA,UAAU,QAAQ,uBAAuB;AAClD,cAAc,YAAY;AAC1B,cAAc,mBAAmB;AACjC,cAAc,sBAAsB;AACpC,cAAc,SAAS;AACvB,cAAc,QAAQ;AACtB,cAAc,YAAY;AAC1B,cAAc,aAAa;AAC3B,cAAc,aAAa;AAC3B,cAAc,aAAa","ignoreList":[]}
+{"version":3,"names":["JsiSkImage"],"sources":["index.ts"],"sourcesContent":["import \"./skia/NativeSetup\";\nexport { JsiSkImage } from \"./skia/web/JsiSkImage\";\nexport * from \"./renderer\";\nexport * from \"./renderer/Canvas\";\nexport * from \"./renderer/Canvas2\";\nexport * from \"./renderer/Offscreen\";\nexport * from \"./views\";\nexport * from \"./skia\";\nexport * from \"./external\";\nexport * from \"./animation\";\nexport * from \"./dom/types\";\nexport * from \"./dom/nodes\";\n"],"mappings":"AAAA,OAAO,oBAAoB;AAC3B,SAASA,UAAU,QAAQ,uBAAuB;AAClD,cAAc,YAAY;AAC1B,cAAc,mBAAmB;AACjC,cAAc,oBAAoB;AAClC,cAAc,sBAAsB;AACpC,cAAc,SAAS;AACvB,cAAc,QAAQ;AACtB,cAAc,YAAY;AAC1B,cAAc,aAAa;AAC3B,cAAc,aAAa;AAC3B,cAAc,aAAa","ignoreList":[]}

package/lib/module/renderer/Canvas.js

@@ -1,10 +1,7 @@
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 import React, { useEffect, useCallback, useMemo, forwardRef, useRef } from "react";
 import { SkiaDomView } from "../views";
-import { Skia } from "../skia/Skia";
-import { SkiaJSDomView } from "../views/SkiaJSDomView";
 import { SkiaRoot } from "./Reconciler";
-import { NATIVE_DOM } from "./HostComponents";
 export const useCanvasRef = () => useRef(null);
 const useOnSizeEvent = (resultValue, onLayout) => {
   return useCallback(event => {
@@ -44,7 +41,7 @@ export const Canvas = /*#__PURE__*/forwardRef(({
     const id = (_innerRef$current$nat = (_innerRef$current2 = innerRef.current) === null || _innerRef$current2 === void 0 ? void 0 : _innerRef$current2.nativeId) !== null && _innerRef$current$nat !== void 0 ? _innerRef$current$nat : -1;
     return id;
   }, [innerRef]);
-  const root = useMemo(() => new SkiaRoot(Skia, NATIVE_DOM, redraw, getNativeId), [redraw, getNativeId]);
+  const root = useMemo(() => new SkiaRoot(redraw, getNativeId), [redraw, getNativeId]);
 
   // Render effect
   useEffect(() => {
@@ -55,28 +52,14 @@ export const Canvas = /*#__PURE__*/forwardRef(({
       root.unmount();
     };
   }, [root]);
-  if (NATIVE_DOM) {
-    return /*#__PURE__*/React.createElement(SkiaDomView, _extends({
-      ref: ref,
-      style: style,
-      root: root.dom,
-      onLayout: onLayout,
-      debug: debug,
-      mode: mode
-    }, props));
-  } else {
-    return /*#__PURE__*/React.createElement(SkiaJSDomView, _extends({
-      Skia: Skia,
-      mode: mode
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      ,
-      ref: ref,
-      style: style,
-      root: root.dom,
-      onLayout: onLayout,
-      debug: debug
-    }, props));
-  }
+  return /*#__PURE__*/React.createElement(SkiaDomView, _extends({
+    ref: ref,
+    style: style,
+    root: root.dom,
+    onLayout: onLayout,
+    debug: debug,
+    mode: mode
+  }, props));
 });
 
 /**

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

@@ -1 +1 @@
-{"version":3,"names":["React","useEffect","useCallback","useMemo","forwardRef","useRef","SkiaDomView","Skia","SkiaJSDomView","SkiaRoot","NATIVE_DOM","useCanvasRef","useOnSizeEvent","resultValue","onLayout","event","width","height","nativeEvent","layout","value","Canvas","children","style","debug","mode","onSize","_onSize","_onLayout","props","forwardedRef","innerRef","ref","useCombinedRefs","redraw","_innerRef$current","current","getNativeId","_innerRef$current$nat","_innerRef$current2","id","nativeId","root","render","unmount","createElement","_extends","dom","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 } from \"../views\";\nimport { Skia } from \"../skia/Skia\";\nimport type { SkiaBaseViewProps } from \"../views\";\nimport { SkiaJSDomView } from \"../views/SkiaJSDomView\";\n\nimport { SkiaRoot } from \"./Reconciler\";\nimport { NATIVE_DOM } from \"./HostComponents\";\n\nexport const useCanvasRef = () => useRef<SkiaDomView>(null);\n\nexport interface CanvasProps extends SkiaBaseViewProps {\n  ref?: RefObject<SkiaDomView>;\n  children: ReactNode;\n  mode?: \"default\" | \"continuous\";\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 (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 = \"default\",\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 root = useMemo(\n      () => new SkiaRoot(Skia, NATIVE_DOM, redraw, getNativeId),\n      [redraw, 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\n    if (NATIVE_DOM) {\n      return (\n        <SkiaDomView\n          ref={ref}\n          style={style}\n          root={root.dom}\n          onLayout={onLayout}\n          debug={debug}\n          mode={mode}\n          {...props}\n        />\n      );\n    } else {\n      return (\n        <SkiaJSDomView\n          Skia={Skia}\n          mode={mode}\n          // eslint-disable-next-line @typescript-eslint/no-explicit-any\n          ref={ref as any}\n          style={style}\n          root={root.dom}\n          onLayout={onLayout}\n          debug={debug}\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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","ignoreList":[]}
+{"version":3,"names":["React","useEffect","useCallback","useMemo","forwardRef","useRef","SkiaDomView","SkiaRoot","useCanvasRef","useOnSizeEvent","resultValue","onLayout","event","width","height","nativeEvent","layout","value","Canvas","children","style","debug","mode","onSize","_onSize","_onLayout","props","forwardedRef","innerRef","ref","useCombinedRefs","redraw","_innerRef$current","current","getNativeId","_innerRef$current$nat","_innerRef$current2","id","nativeId","root","render","unmount","createElement","_extends","dom","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 } from \"../views\";\nimport type { SkiaBaseViewProps } from \"../views\";\n\nimport { SkiaRoot } from \"./Reconciler\";\n\nexport const useCanvasRef = () => useRef<SkiaDomView>(null);\n\nexport interface CanvasProps extends SkiaBaseViewProps {\n  ref?: RefObject<SkiaDomView>;\n  children: ReactNode;\n  mode?: \"default\" | \"continuous\";\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 (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 = \"default\",\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 root = useMemo(\n      () => new SkiaRoot(redraw, getNativeId),\n      [redraw, 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\n    return (\n      <SkiaDomView\n        ref={ref}\n        style={style}\n        root={root.dom}\n        onLayout={onLayout}\n        debug={debug}\n        mode={mode}\n        {...props}\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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","ignoreList":[]}

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

@@ -0,0 +1,10 @@
+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: import("react").ForwardRefExoticComponent<CanvasProps & import("react").RefAttributes<unknown>>;

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

@@ -0,0 +1,105 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef } from "react";
+import { SkiaViewNativeId } from "../views/SkiaViewNativeId";
+import { SkiaSGRoot } from "../sksg/Reconciler";
+import { Skia } from "../skia";
+import { SkiaPictureView } from "../views/SkiaPictureView.web";
+
+// TODO: no need to go through the JS thread for this
+const useOnSizeEvent = (resultValue, onLayout) => {
+  return useCallback(event => {
+    if (onLayout) {
+      onLayout(event);
+    }
+    const {
+      width,
+      height
+    } = event.nativeEvent.layout;
+    if (resultValue) {
+      resultValue.value = {
+        width,
+        height
+      };
+    }
+  }, [onLayout, resultValue]);
+};
+export const Canvas = /*#__PURE__*/forwardRef(({
+  mode,
+  debug,
+  opaque,
+  children,
+  onSize,
+  onLayout: _onLayout,
+  ...viewProps
+}, ref) => {
+  const viewRef = useRef(null);
+  const rafId = useRef(null);
+  const onLayout = useOnSizeEvent(onSize, _onLayout);
+  // Native ID
+  const nativeId = useMemo(() => {
+    return SkiaViewNativeId.current++;
+  }, []);
+
+  // Root
+  const root = useMemo(() => new SkiaSGRoot(Skia), []);
+
+  // Render effects
+  useEffect(() => {
+    root.render(children);
+    if (viewRef.current) {
+      viewRef.current.setPicture(root.getPicture());
+    }
+  }, [children, root]);
+  useEffect(() => {
+    return () => {
+      root.unmount();
+    };
+  }, [root]);
+  const requestRedraw = useCallback(() => {
+    rafId.current = requestAnimationFrame(() => {
+      root.render(children);
+      if (viewRef.current) {
+        viewRef.current.setPicture(root.getPicture());
+      }
+      if (mode === "continuous") {
+        requestRedraw();
+      }
+    });
+  }, [children, mode, root]);
+  useEffect(() => {
+    if (mode === "continuous") {
+      requestRedraw();
+    }
+    return () => {
+      if (rafId.current !== null) {
+        cancelAnimationFrame(rafId.current);
+      }
+    };
+  }, [mode, requestRedraw]);
+
+  // Component methods
+  useImperativeHandle(ref, () => ({
+    makeImageSnapshot: rect => {
+      return SkiaViewApi.makeImageSnapshot(nativeId, rect);
+    },
+    makeImageSnapshotAsync: rect => {
+      return SkiaViewApi.makeImageSnapshotAsync(nativeId, rect);
+    },
+    redraw: () => {
+      var _viewRef$current;
+      (_viewRef$current = viewRef.current) === null || _viewRef$current === void 0 || _viewRef$current.redraw();
+    },
+    getNativeId: () => {
+      return nativeId;
+    }
+  }));
+  return /*#__PURE__*/React.createElement(SkiaPictureView, _extends({
+    ref: viewRef,
+    collapsable: false,
+    nativeID: `${nativeId}`,
+    debug: debug,
+    opaque: opaque,
+    onLayout: onLayout
+  }, viewProps));
+});
+//# sourceMappingURL=Canvas.web.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["forwardRef","useCallback","useEffect","useImperativeHandle","useMemo","useRef","SkiaViewNativeId","SkiaSGRoot","Skia","SkiaPictureView","useOnSizeEvent","resultValue","onLayout","event","width","height","nativeEvent","layout","value","Canvas","mode","debug","opaque","children","onSize","_onLayout","viewProps","ref","viewRef","rafId","nativeId","current","root","render","setPicture","getPicture","unmount","requestRedraw","requestAnimationFrame","cancelAnimationFrame","makeImageSnapshot","rect","SkiaViewApi","makeImageSnapshotAsync","redraw","_viewRef$current","getNativeId","React","createElement","_extends","collapsable","nativeID"],"sources":["Canvas.web.tsx"],"sourcesContent":["import {\n  forwardRef,\n  useCallback,\n  useEffect,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n} from \"react\";\nimport type { LayoutChangeEvent, ViewProps } from \"react-native\";\nimport type { SharedValue } from \"react-native-reanimated\";\n\nimport { SkiaViewNativeId } from \"../views/SkiaViewNativeId\";\nimport type { SkRect, SkSize } from \"../skia/types\";\nimport { SkiaSGRoot } from \"../sksg/Reconciler\";\nimport { Skia } from \"../skia\";\nimport type { SkiaBaseViewProps } from \"../views\";\nimport { SkiaPictureView } from \"../views/SkiaPictureView.web\";\n\n// TODO: no need to go through the JS thread for this\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 (resultValue) {\n        resultValue.value = { width, height };\n      }\n    },\n    [onLayout, resultValue]\n  );\n};\n\nexport interface CanvasProps extends ViewProps {\n  debug?: boolean;\n  opaque?: boolean;\n  onSize?: SharedValue<SkSize>;\n  mode?: \"continuous\" | \"default\";\n}\n\nexport const Canvas = forwardRef(\n  (\n    {\n      mode,\n      debug,\n      opaque,\n      children,\n      onSize,\n      onLayout: _onLayout,\n      ...viewProps\n    }: CanvasProps,\n    ref\n  ) => {\n    const viewRef = useRef<SkiaPictureView>(null);\n    const rafId = useRef<number | null>(null);\n    const onLayout = useOnSizeEvent(onSize, _onLayout);\n    // Native ID\n    const nativeId = useMemo(() => {\n      return SkiaViewNativeId.current++;\n    }, []);\n\n    // Root\n    const root = useMemo(() => new SkiaSGRoot(Skia), []);\n\n    // Render effects\n    useEffect(() => {\n      root.render(children);\n      if (viewRef.current) {\n        viewRef.current.setPicture(root.getPicture());\n      }\n    }, [children, root]);\n\n    useEffect(() => {\n      return () => {\n        root.unmount();\n      };\n    }, [root]);\n\n    const requestRedraw = useCallback(() => {\n      rafId.current = requestAnimationFrame(() => {\n        root.render(children);\n        if (viewRef.current) {\n          viewRef.current.setPicture(root.getPicture());\n        }\n        if (mode === \"continuous\") {\n          requestRedraw();\n        }\n      });\n    }, [children, mode, root]);\n\n    useEffect(() => {\n      if (mode === \"continuous\") {\n        requestRedraw();\n      }\n      return () => {\n        if (rafId.current !== null) {\n          cancelAnimationFrame(rafId.current);\n        }\n      };\n    }, [mode, requestRedraw]);\n\n    // Component methods\n    useImperativeHandle(ref, () => ({\n      makeImageSnapshot: (rect?: SkRect) => {\n        return SkiaViewApi.makeImageSnapshot(nativeId, rect);\n      },\n      makeImageSnapshotAsync: (rect?: SkRect) => {\n        return SkiaViewApi.makeImageSnapshotAsync(nativeId, rect);\n      },\n      redraw: () => {\n        viewRef.current?.redraw();\n      },\n      getNativeId: () => {\n        return nativeId;\n      },\n    }));\n    return (\n      <SkiaPictureView\n        ref={viewRef}\n        collapsable={false}\n        nativeID={`${nativeId}`}\n        debug={debug}\n        opaque={opaque}\n        onLayout={onLayout}\n        {...viewProps}\n      />\n    );\n  }\n);\n"],"mappings":"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","ignoreList":[]}

package/lib/module/renderer/Canvas2.d.ts

@@ -0,0 +1,10 @@
+import type { ViewProps } from "react-native";
+import type { SharedValue } from "react-native-reanimated";
+import type { SkSize } from "../skia/types";
+export interface Canvas2Props extends ViewProps {
+    debug?: boolean;
+    opaque?: boolean;
+    onSize?: SharedValue<SkSize>;
+    mode?: "continuous" | "default";
+}
+export declare const Canvas2: import("react").ForwardRefExoticComponent<Canvas2Props & import("react").RefAttributes<unknown>>;

package/lib/module/renderer/Canvas2.js

@@ -0,0 +1,97 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef } from "react";
+import { SkiaViewNativeId } from "../views/SkiaViewNativeId";
+import SkiaPictureViewNativeComponent from "../specs/SkiaPictureViewNativeComponent";
+import { SkiaSGRoot } from "../sksg/Reconciler";
+import { Skia } from "../skia";
+const NativeSkiaPictureView = SkiaPictureViewNativeComponent;
+
+// TODO: no need to go through the JS thread for this
+const useOnSizeEvent = (resultValue, onLayout) => {
+  return useCallback(event => {
+    if (onLayout) {
+      onLayout(event);
+    }
+    const {
+      width,
+      height
+    } = event.nativeEvent.layout;
+    if (resultValue) {
+      resultValue.value = {
+        width,
+        height
+      };
+    }
+  }, [onLayout, resultValue]);
+};
+export const Canvas2 = /*#__PURE__*/forwardRef(({
+  mode,
+  debug,
+  opaque,
+  children,
+  onSize,
+  onLayout: _onLayout,
+  ...viewProps
+}, ref) => {
+  const rafId = useRef(null);
+  const onLayout = useOnSizeEvent(onSize, _onLayout);
+  // Native ID
+  const nativeId = useMemo(() => {
+    return SkiaViewNativeId.current++;
+  }, []);
+
+  // Root
+  const root = useMemo(() => new SkiaSGRoot(Skia, nativeId), [nativeId]);
+
+  // Render effects
+  useEffect(() => {
+    root.render(children);
+  }, [children, root]);
+  useEffect(() => {
+    return () => {
+      root.unmount();
+    };
+  }, [root]);
+  const requestRedraw = useCallback(() => {
+    rafId.current = requestAnimationFrame(() => {
+      root.render(children);
+      if (mode === "continuous") {
+        requestRedraw();
+      }
+    });
+  }, [children, mode, root]);
+  useEffect(() => {
+    if (mode === "continuous") {
+      requestRedraw();
+    }
+    return () => {
+      if (rafId.current !== null) {
+        cancelAnimationFrame(rafId.current);
+      }
+    };
+  }, [mode, requestRedraw]);
+
+  // Component methods
+  useImperativeHandle(ref, () => ({
+    makeImageSnapshot: rect => {
+      return SkiaViewApi.makeImageSnapshot(nativeId, rect);
+    },
+    makeImageSnapshotAsync: rect => {
+      return SkiaViewApi.makeImageSnapshotAsync(nativeId, rect);
+    },
+    redraw: () => {
+      SkiaViewApi.requestRedraw(nativeId);
+    },
+    getNativeId: () => {
+      return nativeId;
+    }
+  }));
+  return /*#__PURE__*/React.createElement(NativeSkiaPictureView, _extends({
+    collapsable: false,
+    nativeID: `${nativeId}`,
+    debug: debug,
+    opaque: opaque,
+    onLayout: onLayout
+  }, viewProps));
+});
+//# sourceMappingURL=Canvas2.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["forwardRef","useCallback","useEffect","useImperativeHandle","useMemo","useRef","SkiaViewNativeId","SkiaPictureViewNativeComponent","SkiaSGRoot","Skia","NativeSkiaPictureView","useOnSizeEvent","resultValue","onLayout","event","width","height","nativeEvent","layout","value","Canvas2","mode","debug","opaque","children","onSize","_onLayout","viewProps","ref","rafId","nativeId","current","root","render","unmount","requestRedraw","requestAnimationFrame","cancelAnimationFrame","makeImageSnapshot","rect","SkiaViewApi","makeImageSnapshotAsync","redraw","getNativeId","React","createElement","_extends","collapsable","nativeID"],"sources":["Canvas2.tsx"],"sourcesContent":["import {\n  forwardRef,\n  useCallback,\n  useEffect,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n} from \"react\";\nimport type { LayoutChangeEvent, ViewProps } from \"react-native\";\nimport type { SharedValue } from \"react-native-reanimated\";\n\nimport { SkiaViewNativeId } from \"../views/SkiaViewNativeId\";\nimport SkiaPictureViewNativeComponent from \"../specs/SkiaPictureViewNativeComponent\";\nimport type { SkRect, SkSize } from \"../skia/types\";\nimport { SkiaSGRoot } from \"../sksg/Reconciler\";\nimport { Skia } from \"../skia\";\nimport type { SkiaBaseViewProps } from \"../views\";\n\nconst NativeSkiaPictureView = SkiaPictureViewNativeComponent;\n\n// TODO: no need to go through the JS thread for this\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 (resultValue) {\n        resultValue.value = { width, height };\n      }\n    },\n    [onLayout, resultValue]\n  );\n};\n\nexport interface Canvas2Props extends ViewProps {\n  debug?: boolean;\n  opaque?: boolean;\n  onSize?: SharedValue<SkSize>;\n  mode?: \"continuous\" | \"default\";\n}\n\nexport const Canvas2 = forwardRef(\n  (\n    {\n      mode,\n      debug,\n      opaque,\n      children,\n      onSize,\n      onLayout: _onLayout,\n      ...viewProps\n    }: Canvas2Props,\n    ref\n  ) => {\n    const rafId = useRef<number | null>(null);\n    const onLayout = useOnSizeEvent(onSize, _onLayout);\n    // Native ID\n    const nativeId = useMemo(() => {\n      return SkiaViewNativeId.current++;\n    }, []);\n\n    // Root\n    const root = useMemo(() => new SkiaSGRoot(Skia, nativeId), [nativeId]);\n\n    // Render effects\n    useEffect(() => {\n      root.render(children);\n    }, [children, root]);\n\n    useEffect(() => {\n      return () => {\n        root.unmount();\n      };\n    }, [root]);\n\n    const requestRedraw = useCallback(() => {\n      rafId.current = requestAnimationFrame(() => {\n        root.render(children);\n        if (mode === \"continuous\") {\n          requestRedraw();\n        }\n      });\n    }, [children, mode, root]);\n\n    useEffect(() => {\n      if (mode === \"continuous\") {\n        requestRedraw();\n      }\n      return () => {\n        if (rafId.current !== null) {\n          cancelAnimationFrame(rafId.current);\n        }\n      };\n    }, [mode, requestRedraw]);\n\n    // Component methods\n    useImperativeHandle(ref, () => ({\n      makeImageSnapshot: (rect?: SkRect) => {\n        return SkiaViewApi.makeImageSnapshot(nativeId, rect);\n      },\n      makeImageSnapshotAsync: (rect?: SkRect) => {\n        return SkiaViewApi.makeImageSnapshotAsync(nativeId, rect);\n      },\n      redraw: () => {\n        SkiaViewApi.requestRedraw(nativeId);\n      },\n      getNativeId: () => {\n        return nativeId;\n      },\n    }));\n    return (\n      <NativeSkiaPictureView\n        collapsable={false}\n        nativeID={`${nativeId}`}\n        debug={debug}\n        opaque={opaque}\n        onLayout={onLayout}\n        {...viewProps}\n      />\n    );\n  }\n);\n"],"mappings":";AAAA,SACEA,UAAU,EACVC,WAAW,EACXC,SAAS,EACTC,mBAAmB,EACnBC,OAAO,EACPC,MAAM,QACD,OAAO;AAId,SAASC,gBAAgB,QAAQ,2BAA2B;AAC5D,OAAOC,8BAA8B,MAAM,yCAAyC;AAEpF,SAASC,UAAU,QAAQ,oBAAoB;AAC/C,SAASC,IAAI,QAAQ,SAAS;AAG9B,MAAMC,qBAAqB,GAAGH,8BAA8B;;AAE5D;AACA,MAAMI,cAAc,GAAGA,CACrBC,WAAwC,EACxCC,QAA6C,KAC1C;EACH,OAAOZ,WAAW,CACfa,KAAwB,IAAK;IAC5B,IAAID,QAAQ,EAAE;MACZA,QAAQ,CAACC,KAAK,CAAC;IACjB;IACA,MAAM;MAAEC,KAAK;MAAEC;IAAO,CAAC,GAAGF,KAAK,CAACG,WAAW,CAACC,MAAM;IAElD,IAAIN,WAAW,EAAE;MACfA,WAAW,CAACO,KAAK,GAAG;QAAEJ,KAAK;QAAEC;MAAO,CAAC;IACvC;EACF,CAAC,EACD,CAACH,QAAQ,EAAED,WAAW,CACxB,CAAC;AACH,CAAC;AASD,OAAO,MAAMQ,OAAO,gBAAGpB,UAAU,CAC/B,CACE;EACEqB,IAAI;EACJC,KAAK;EACLC,MAAM;EACNC,QAAQ;EACRC,MAAM;EACNZ,QAAQ,EAAEa,SAAS;EACnB,GAAGC;AACS,CAAC,EACfC,GAAG,KACA;EACH,MAAMC,KAAK,GAAGxB,MAAM,CAAgB,IAAI,CAAC;EACzC,MAAMQ,QAAQ,GAAGF,cAAc,CAACc,MAAM,EAAEC,SAAS,CAAC;EAClD;EACA,MAAMI,QAAQ,GAAG1B,OAAO,CAAC,MAAM;IAC7B,OAAOE,gBAAgB,CAACyB,OAAO,EAAE;EACnC,CAAC,EAAE,EAAE,CAAC;;EAEN;EACA,MAAMC,IAAI,GAAG5B,OAAO,CAAC,MAAM,IAAII,UAAU,CAACC,IAAI,EAAEqB,QAAQ,CAAC,EAAE,CAACA,QAAQ,CAAC,CAAC;;EAEtE;EACA5B,SAAS,CAAC,MAAM;IACd8B,IAAI,CAACC,MAAM,CAACT,QAAQ,CAAC;EACvB,CAAC,EAAE,CAACA,QAAQ,EAAEQ,IAAI,CAAC,CAAC;EAEpB9B,SAAS,CAAC,MAAM;IACd,OAAO,MAAM;MACX8B,IAAI,CAACE,OAAO,CAAC,CAAC;IAChB,CAAC;EACH,CAAC,EAAE,CAACF,IAAI,CAAC,CAAC;EAEV,MAAMG,aAAa,GAAGlC,WAAW,CAAC,MAAM;IACtC4B,KAAK,CAACE,OAAO,GAAGK,qBAAqB,CAAC,MAAM;MAC1CJ,IAAI,CAACC,MAAM,CAACT,QAAQ,CAAC;MACrB,IAAIH,IAAI,KAAK,YAAY,EAAE;QACzBc,aAAa,CAAC,CAAC;MACjB;IACF,CAAC,CAAC;EACJ,CAAC,EAAE,CAACX,QAAQ,EAAEH,IAAI,EAAEW,IAAI,CAAC,CAAC;EAE1B9B,SAAS,CAAC,MAAM;IACd,IAAImB,IAAI,KAAK,YAAY,EAAE;MACzBc,aAAa,CAAC,CAAC;IACjB;IACA,OAAO,MAAM;MACX,IAAIN,KAAK,CAACE,OAAO,KAAK,IAAI,EAAE;QAC1BM,oBAAoB,CAACR,KAAK,CAACE,OAAO,CAAC;MACrC;IACF,CAAC;EACH,CAAC,EAAE,CAACV,IAAI,EAAEc,aAAa,CAAC,CAAC;;EAEzB;EACAhC,mBAAmB,CAACyB,GAAG,EAAE,OAAO;IAC9BU,iBAAiB,EAAGC,IAAa,IAAK;MACpC,OAAOC,WAAW,CAACF,iBAAiB,CAACR,QAAQ,EAAES,IAAI,CAAC;IACtD,CAAC;IACDE,sBAAsB,EAAGF,IAAa,IAAK;MACzC,OAAOC,WAAW,CAACC,sBAAsB,CAACX,QAAQ,EAAES,IAAI,CAAC;IAC3D,CAAC;IACDG,MAAM,EAAEA,CAAA,KAAM;MACZF,WAAW,CAACL,aAAa,CAACL,QAAQ,CAAC;IACrC,CAAC;IACDa,WAAW,EAAEA,CAAA,KAAM;MACjB,OAAOb,QAAQ;IACjB;EACF,CAAC,CAAC,CAAC;EACH,oBACEc,KAAA,CAAAC,aAAA,CAACnC,qBAAqB,EAAAoC,QAAA;IACpBC,WAAW,EAAE,KAAM;IACnBC,QAAQ,EAAE,GAAGlB,QAAQ,EAAG;IACxBR,KAAK,EAAEA,KAAM;IACbC,MAAM,EAAEA,MAAO;IACfV,QAAQ,EAAEA;EAAS,GACfc,SAAS,CACd,CAAC;AAEN,CACF,CAAC","ignoreList":[]}

package/lib/module/renderer/Canvas2.web.d.ts

@@ -0,0 +1,3 @@
+import type { CanvasProps } from "./Canvas";
+export type Canvas2Props = CanvasProps;
+export declare const Canvas2: import("react").FunctionComponent<CanvasProps & import("react").RefAttributes<import("..").SkiaDomView>>;

package/lib/module/renderer/Canvas2.web.js

@@ -0,0 +1,3 @@
+import { Canvas } from "./Canvas";
+export const Canvas2 = Canvas;
+//# sourceMappingURL=Canvas2.web.js.map

package/lib/module/renderer/Canvas2.web.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Canvas","Canvas2"],"sources":["Canvas2.web.tsx"],"sourcesContent":["import type { CanvasProps } from \"./Canvas\";\nimport { Canvas } from \"./Canvas\";\n\nexport type Canvas2Props = CanvasProps;\n\nexport const Canvas2 = Canvas;\n"],"mappings":"AACA,SAASA,MAAM,QAAQ,UAAU;AAIjC,OAAO,MAAMC,OAAO,GAAGD,MAAM","ignoreList":[]}

package/lib/module/renderer/Container.d.ts

@@ -1,12 +1,10 @@
-import type { GroupProps, DrawingContext, RenderNode, SkDOM } from "../dom/types";
-import type { Skia } from "../skia/types";
+import type { Node, SkDOM } from "../dom/types";
 export declare class Container {
     redraw: () => void;
     getNativeId: () => number;
     private _root;
     Sk: SkDOM;
     unmounted: boolean;
-    constructor(Skia: Skia, redraw: () => void, getNativeId: () => number, native: boolean);
-    draw(ctx: DrawingContext): void;
-    get root(): RenderNode<GroupProps>;
+    constructor(redraw?: () => void, getNativeId?: () => number);
+    get root(): Node<unknown>;
 }