react-native-skia 0.0.1 → 3.0.0

package/lib/module/sksg/Node.js

@@ -0,0 +1,67 @@
+import { NodeType } from "../dom/types";
+export const isColorFilter = type => {
+  "worklet";
+
+  return type === NodeType.BlendColorFilter || type === NodeType.MatrixColorFilter || type === NodeType.LerpColorFilter || type === NodeType.LumaColorFilter || type === NodeType.SRGBToLinearGammaColorFilter || type === NodeType.LinearToSRGBGammaColorFilter;
+};
+export const isPathEffect = type => {
+  "worklet";
+
+  return type === NodeType.DiscretePathEffect || type === NodeType.DashPathEffect || type === NodeType.Path1DPathEffect || type === NodeType.Path2DPathEffect || type === NodeType.CornerPathEffect || type === NodeType.SumPathEffect || type === NodeType.Line2DPathEffect;
+};
+export const isImageFilter = type => {
+  "worklet";
+
+  return type === NodeType.ImageFilter || type === NodeType.OffsetImageFilter || type === NodeType.DisplacementMapImageFilter || type === NodeType.BlurImageFilter || type === NodeType.DropShadowImageFilter || type === NodeType.MorphologyImageFilter || type === NodeType.BlendImageFilter || type === NodeType.RuntimeShaderImageFilter;
+};
+export const isShader = type => {
+  "worklet";
+
+  return type === NodeType.Shader || type === NodeType.ImageShader || type === NodeType.ColorShader || type === NodeType.Turbulence || type === NodeType.FractalNoise || type === NodeType.LinearGradient || type === NodeType.RadialGradient || type === NodeType.SweepGradient || type === NodeType.TwoPointConicalGradient;
+};
+export const sortNodeChildren = parent => {
+  "worklet";
+
+  const maskFilters = [];
+  const colorFilters = [];
+  const shaders = [];
+  const imageFilters = [];
+  const pathEffects = [];
+  const drawings = [];
+  const paints = [];
+  parent.children.forEach(node => {
+    if (isColorFilter(node.type)) {
+      colorFilters.push(node);
+    } else if (node.type === NodeType.BlurMaskFilter) {
+      maskFilters.push(node);
+    } else if (isPathEffect(node.type)) {
+      pathEffects.push(node);
+    } else if (isImageFilter(node.type)) {
+      imageFilters.push(node);
+    } else if (isShader(node.type)) {
+      shaders.push(node);
+    } else if (node.type === NodeType.Paint) {
+      paints.push(node);
+    } else if (node.type === NodeType.Blend) {
+      if (node.children[0] && isImageFilter(node.children[0].type)) {
+        node.type = NodeType.BlendImageFilter;
+        imageFilters.push(node);
+      } else {
+        node.type = NodeType.Blend;
+        shaders.push(node);
+      }
+    } else {
+      drawings.push(node);
+    }
+  });
+  return {
+    colorFilters,
+    drawings,
+    maskFilters,
+    shaders,
+    pathEffects,
+    imageFilters,
+    paints
+  };
+};
+//# sourceMappingURL=Node.js.map

package/lib/module/sksg/Node.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["NodeType","isColorFilter","type","BlendColorFilter","MatrixColorFilter","LerpColorFilter","LumaColorFilter","SRGBToLinearGammaColorFilter","LinearToSRGBGammaColorFilter","isPathEffect","DiscretePathEffect","DashPathEffect","Path1DPathEffect","Path2DPathEffect","CornerPathEffect","SumPathEffect","Line2DPathEffect","isImageFilter","ImageFilter","OffsetImageFilter","DisplacementMapImageFilter","BlurImageFilter","DropShadowImageFilter","MorphologyImageFilter","BlendImageFilter","RuntimeShaderImageFilter","isShader","Shader","ImageShader","ColorShader","Turbulence","FractalNoise","LinearGradient","RadialGradient","SweepGradient","TwoPointConicalGradient","sortNodeChildren","parent","maskFilters","colorFilters","shaders","imageFilters","pathEffects","drawings","paints","children","forEach","node","push","BlurMaskFilter","Paint","Blend"],"sources":["Node.ts"],"sourcesContent":["import { NodeType } from \"../dom/types\";\n\nexport interface Node<Props = unknown> {\n  type: NodeType;\n  props: Props;\n  children: Node[];\n}\n\nexport const isColorFilter = (type: NodeType) => {\n  \"worklet\";\n  return (\n    type === NodeType.BlendColorFilter ||\n    type === NodeType.MatrixColorFilter ||\n    type === NodeType.LerpColorFilter ||\n    type === NodeType.LumaColorFilter ||\n    type === NodeType.SRGBToLinearGammaColorFilter ||\n    type === NodeType.LinearToSRGBGammaColorFilter\n  );\n};\n\nexport const isPathEffect = (type: NodeType) => {\n  \"worklet\";\n  return (\n    type === NodeType.DiscretePathEffect ||\n    type === NodeType.DashPathEffect ||\n    type === NodeType.Path1DPathEffect ||\n    type === NodeType.Path2DPathEffect ||\n    type === NodeType.CornerPathEffect ||\n    type === NodeType.SumPathEffect ||\n    type === NodeType.Line2DPathEffect\n  );\n};\n\nexport const isImageFilter = (type: NodeType) => {\n  \"worklet\";\n  return (\n    type === NodeType.ImageFilter ||\n    type === NodeType.OffsetImageFilter ||\n    type === NodeType.DisplacementMapImageFilter ||\n    type === NodeType.BlurImageFilter ||\n    type === NodeType.DropShadowImageFilter ||\n    type === NodeType.MorphologyImageFilter ||\n    type === NodeType.BlendImageFilter ||\n    type === NodeType.RuntimeShaderImageFilter\n  );\n};\n\nexport const isShader = (type: NodeType) => {\n  \"worklet\";\n  return (\n    type === NodeType.Shader ||\n    type === NodeType.ImageShader ||\n    type === NodeType.ColorShader ||\n    type === NodeType.Turbulence ||\n    type === NodeType.FractalNoise ||\n    type === NodeType.LinearGradient ||\n    type === NodeType.RadialGradient ||\n    type === NodeType.SweepGradient ||\n    type === NodeType.TwoPointConicalGradient\n  );\n};\n\nexport const sortNodeChildren = (parent: Node) => {\n  \"worklet\";\n  const maskFilters: Node[] = [];\n  const colorFilters: Node[] = [];\n  const shaders: Node[] = [];\n  const imageFilters: Node[] = [];\n  const pathEffects: Node[] = [];\n  const drawings: Node[] = [];\n  const paints: Node[] = [];\n  parent.children.forEach((node) => {\n    if (isColorFilter(node.type)) {\n      colorFilters.push(node);\n    } else if (node.type === NodeType.BlurMaskFilter) {\n      maskFilters.push(node);\n    } else if (isPathEffect(node.type)) {\n      pathEffects.push(node);\n    } else if (isImageFilter(node.type)) {\n      imageFilters.push(node);\n    } else if (isShader(node.type)) {\n      shaders.push(node);\n    } else if (node.type === NodeType.Paint) {\n      paints.push(node);\n    } else if (node.type === NodeType.Blend) {\n      if (node.children[0] && isImageFilter(node.children[0].type)) {\n        node.type = NodeType.BlendImageFilter;\n        imageFilters.push(node);\n      } else {\n        node.type = NodeType.Blend;\n        shaders.push(node);\n      }\n    } else {\n      drawings.push(node);\n    }\n  });\n  return {\n    colorFilters,\n    drawings,\n    maskFilters,\n    shaders,\n    pathEffects,\n    imageFilters,\n    paints,\n  };\n};\n"],"mappings":"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","ignoreList":[]}

package/lib/module/sksg/Reconciler.d.ts

@@ -0,0 +1,21 @@
+import type { ReactNode } from "react";
+import type { SkCanvas, Skia } from "../skia/types";
+import { NodeType } from "../dom/types";
+import "./Elements";
+export declare class SkiaSGRoot {
+    Skia: Skia;
+    private root;
+    private container;
+    constructor(Skia: Skia, nativeId?: number);
+    get sg(): {
+        type: NodeType;
+        props: {};
+        children: import("./Node").Node<unknown>[];
+        isDeclaration: boolean;
+    };
+    private updateContainer;
+    render(element: ReactNode): Promise<void>;
+    drawOnCanvas(canvas: SkCanvas): void;
+    getPicture(): import("../skia/types").SkPicture;
+    unmount(): Promise<unknown>;
+}

package/lib/module/sksg/Reconciler.js

@@ -0,0 +1,64 @@
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import ReactReconciler from "react-reconciler";
+import { NodeType } from "../dom/types";
+import { debug, sksgHostConfig } from "./HostConfig";
+import { createContainer } from "./Container";
+import "./Elements";
+const skiaReconciler = ReactReconciler(sksgHostConfig);
+
+// @ts-expect-error DefinitelyTyped is not up to date
+skiaReconciler.injectIntoDevTools();
+export class SkiaSGRoot {
+  constructor(Skia, nativeId = -1) {
+    this.Skia = Skia;
+    _defineProperty(this, "root", void 0);
+    _defineProperty(this, "container", void 0);
+    const strictMode = false;
+    this.container = createContainer(Skia, nativeId);
+    this.root = skiaReconciler.createContainer(this.container, 0, null, strictMode, null, "", console.error, null);
+  }
+  get sg() {
+    const children = this.container.root;
+    return {
+      type: NodeType.Group,
+      props: {},
+      children,
+      isDeclaration: false
+    };
+  }
+  updateContainer(element) {
+    return new Promise(resolve => {
+      skiaReconciler.updateContainer(element, this.root, null, () => {
+        resolve(true);
+      });
+    });
+  }
+  async render(element) {
+    this.container.mount();
+    await this.updateContainer(element);
+    this.container.redraw();
+  }
+  drawOnCanvas(canvas) {
+    this.container.drawOnCanvas(canvas);
+  }
+  getPicture() {
+    const recorder = this.Skia.PictureRecorder();
+    const canvas = recorder.beginRecording();
+    this.drawOnCanvas(canvas);
+    const picture = recorder.finishRecordingAsPicture();
+    recorder.dispose();
+    return picture;
+  }
+  unmount() {
+    this.container.unmount();
+    return new Promise(resolve => {
+      skiaReconciler.updateContainer(null, this.root, null, () => {
+        debug("unmountContainer");
+        resolve(true);
+      });
+    });
+  }
+}
+//# sourceMappingURL=Reconciler.js.map

package/lib/module/sksg/Reconciler.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["ReactReconciler","NodeType","debug","sksgHostConfig","createContainer","skiaReconciler","injectIntoDevTools","SkiaSGRoot","constructor","Skia","nativeId","_defineProperty","strictMode","container","root","console","error","sg","children","type","Group","props","isDeclaration","updateContainer","element","Promise","resolve","render","mount","redraw","drawOnCanvas","canvas","getPicture","recorder","PictureRecorder","beginRecording","picture","finishRecordingAsPicture","dispose","unmount"],"sources":["Reconciler.ts"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport type { OpaqueRoot } from \"react-reconciler\";\nimport ReactReconciler from \"react-reconciler\";\n\nimport type { SkCanvas, Skia } from \"../skia/types\";\nimport { NodeType } from \"../dom/types\";\n\nimport { debug, sksgHostConfig } from \"./HostConfig\";\nimport type { Container } from \"./StaticContainer\";\nimport { createContainer } from \"./Container\";\n\nimport \"./Elements\";\n\nconst skiaReconciler = ReactReconciler(sksgHostConfig);\n\n// @ts-expect-error DefinitelyTyped is not up to date\nskiaReconciler.injectIntoDevTools();\n\nexport class SkiaSGRoot {\n  private root: OpaqueRoot;\n  private container: Container;\n\n  constructor(\n    public Skia: Skia,\n    nativeId = -1\n  ) {\n    const strictMode = false;\n    this.container = createContainer(Skia, nativeId);\n    this.root = skiaReconciler.createContainer(\n      this.container,\n      0,\n      null,\n      strictMode,\n      null,\n      \"\",\n      console.error,\n      null\n    );\n  }\n\n  get sg() {\n    const children = this.container.root;\n    return { type: NodeType.Group, props: {}, children, isDeclaration: false };\n  }\n\n  private updateContainer(element: ReactNode) {\n    return new Promise((resolve) => {\n      skiaReconciler.updateContainer(element, this.root, null, () => {\n        resolve(true);\n      });\n    });\n  }\n\n  async render(element: ReactNode) {\n    this.container.mount();\n    await this.updateContainer(element);\n    this.container.redraw();\n  }\n\n  drawOnCanvas(canvas: SkCanvas) {\n    this.container.drawOnCanvas(canvas);\n  }\n\n  getPicture() {\n    const recorder = this.Skia.PictureRecorder();\n    const canvas = recorder.beginRecording();\n    this.drawOnCanvas(canvas);\n    const picture = recorder.finishRecordingAsPicture();\n    recorder.dispose();\n    return picture;\n  }\n\n  unmount() {\n    this.container.unmount();\n    return new Promise((resolve) => {\n      skiaReconciler.updateContainer(null, this.root, null, () => {\n        debug(\"unmountContainer\");\n        resolve(true);\n      });\n    });\n  }\n}\n"],"mappings":";;;AAEA,OAAOA,eAAe,MAAM,kBAAkB;AAG9C,SAASC,QAAQ,QAAQ,cAAc;AAEvC,SAASC,KAAK,EAAEC,cAAc,QAAQ,cAAc;AAEpD,SAASC,eAAe,QAAQ,aAAa;AAE7C,OAAO,YAAY;AAEnB,MAAMC,cAAc,GAAGL,eAAe,CAACG,cAAc,CAAC;;AAEtD;AACAE,cAAc,CAACC,kBAAkB,CAAC,CAAC;AAEnC,OAAO,MAAMC,UAAU,CAAC;EAItBC,WAAWA,CACFC,IAAU,EACjBC,QAAQ,GAAG,CAAC,CAAC,EACb;IAAA,KAFOD,IAAU,GAAVA,IAAU;IAAAE,eAAA;IAAAA,eAAA;IAGjB,MAAMC,UAAU,GAAG,KAAK;IACxB,IAAI,CAACC,SAAS,GAAGT,eAAe,CAACK,IAAI,EAAEC,QAAQ,CAAC;IAChD,IAAI,CAACI,IAAI,GAAGT,cAAc,CAACD,eAAe,CACxC,IAAI,CAACS,SAAS,EACd,CAAC,EACD,IAAI,EACJD,UAAU,EACV,IAAI,EACJ,EAAE,EACFG,OAAO,CAACC,KAAK,EACb,IACF,CAAC;EACH;EAEA,IAAIC,EAAEA,CAAA,EAAG;IACP,MAAMC,QAAQ,GAAG,IAAI,CAACL,SAAS,CAACC,IAAI;IACpC,OAAO;MAAEK,IAAI,EAAElB,QAAQ,CAACmB,KAAK;MAAEC,KAAK,EAAE,CAAC,CAAC;MAAEH,QAAQ;MAAEI,aAAa,EAAE;IAAM,CAAC;EAC5E;EAEQC,eAAeA,CAACC,OAAkB,EAAE;IAC1C,OAAO,IAAIC,OAAO,CAAEC,OAAO,IAAK;MAC9BrB,cAAc,CAACkB,eAAe,CAACC,OAAO,EAAE,IAAI,CAACV,IAAI,EAAE,IAAI,EAAE,MAAM;QAC7DY,OAAO,CAAC,IAAI,CAAC;MACf,CAAC,CAAC;IACJ,CAAC,CAAC;EACJ;EAEA,MAAMC,MAAMA,CAACH,OAAkB,EAAE;IAC/B,IAAI,CAACX,SAAS,CAACe,KAAK,CAAC,CAAC;IACtB,MAAM,IAAI,CAACL,eAAe,CAACC,OAAO,CAAC;IACnC,IAAI,CAACX,SAAS,CAACgB,MAAM,CAAC,CAAC;EACzB;EAEAC,YAAYA,CAACC,MAAgB,EAAE;IAC7B,IAAI,CAAClB,SAAS,CAACiB,YAAY,CAACC,MAAM,CAAC;EACrC;EAEAC,UAAUA,CAAA,EAAG;IACX,MAAMC,QAAQ,GAAG,IAAI,CAACxB,IAAI,CAACyB,eAAe,CAAC,CAAC;IAC5C,MAAMH,MAAM,GAAGE,QAAQ,CAACE,cAAc,CAAC,CAAC;IACxC,IAAI,CAACL,YAAY,CAACC,MAAM,CAAC;IACzB,MAAMK,OAAO,GAAGH,QAAQ,CAACI,wBAAwB,CAAC,CAAC;IACnDJ,QAAQ,CAACK,OAAO,CAAC,CAAC;IAClB,OAAOF,OAAO;EAChB;EAEAG,OAAOA,CAAA,EAAG;IACR,IAAI,CAAC1B,SAAS,CAAC0B,OAAO,CAAC,CAAC;IACxB,OAAO,IAAId,OAAO,CAAEC,OAAO,IAAK;MAC9BrB,cAAc,CAACkB,eAAe,CAAC,IAAI,EAAE,IAAI,CAACT,IAAI,EAAE,IAAI,EAAE,MAAM;QAC1DZ,KAAK,CAAC,kBAAkB,CAAC;QACzBwB,OAAO,CAAC,IAAI,CAAC;MACf,CAAC,CAAC;IACJ,CAAC,CAAC;EACJ;AACF","ignoreList":[]}

package/lib/module/sksg/Recorder/Core.d.ts

@@ -0,0 +1,83 @@
+import type { BlurMaskFilterProps, CircleProps, CTMProps, ImageProps, PointsProps, PathProps, RectProps, RoundedRectProps, OvalProps, LineProps, PatchProps, VerticesProps, DiffRectProps, TextProps, TextPathProps, TextBlobProps, GlyphsProps, PictureProps, ImageSVGProps, ParagraphProps, AtlasProps, DrawingNodeProps, SkottieProps } from "../../dom/types";
+export declare enum CommandType {
+    Group = 0,
+    SavePaint = 1,
+    RestorePaint = 2,
+    SaveCTM = 3,
+    RestoreCTM = 4,
+    PushColorFilter = 5,
+    PushBlurMaskFilter = 6,
+    PushImageFilter = 7,
+    PushPathEffect = 8,
+    PushShader = 9,
+    ComposeColorFilter = 10,
+    ComposeImageFilter = 11,
+    ComposePathEffect = 12,
+    MaterializePaint = 13,
+    SaveBackdropFilter = 14,
+    SaveLayer = 15,
+    RestorePaintDeclaration = 16,
+    DrawBox = 17,
+    DrawImage = 18,
+    DrawCircle = 19,
+    DrawPaint = 20,
+    DrawPoints = 21,
+    DrawPath = 22,
+    DrawRect = 23,
+    DrawRRect = 24,
+    DrawOval = 25,
+    DrawLine = 26,
+    DrawPatch = 27,
+    DrawVertices = 28,
+    DrawDiffRect = 29,
+    DrawText = 30,
+    DrawTextPath = 31,
+    DrawTextBlob = 32,
+    DrawGlyphs = 33,
+    DrawPicture = 34,
+    DrawImageSVG = 35,
+    DrawParagraph = 36,
+    DrawAtlas = 37,
+    DrawSkottie = 38
+}
+export type Command<T extends CommandType = CommandType> = {
+    type: T;
+    [key: string]: unknown;
+};
+export declare const materializeCommand: (command: any) => any;
+export declare const isCommand: <T extends CommandType>(command: Command, type: T) => command is Command<T>;
+export interface GroupCommand extends Command<CommandType.Group> {
+    props?: Pick<DrawingNodeProps, "zIndex">;
+    children: Command[];
+}
+export declare const isGroup: (command: Command) => command is GroupCommand;
+interface Props {
+    [CommandType.DrawImage]: ImageProps;
+    [CommandType.DrawCircle]: CircleProps;
+    [CommandType.SaveCTM]: CTMProps;
+    [CommandType.SavePaint]: DrawingNodeProps;
+    [CommandType.PushBlurMaskFilter]: BlurMaskFilterProps;
+    [CommandType.DrawPoints]: PointsProps;
+    [CommandType.DrawPath]: PathProps;
+    [CommandType.DrawRect]: RectProps;
+    [CommandType.DrawRRect]: RoundedRectProps;
+    [CommandType.DrawOval]: OvalProps;
+    [CommandType.DrawLine]: LineProps;
+    [CommandType.DrawPatch]: PatchProps;
+    [CommandType.DrawVertices]: VerticesProps;
+    [CommandType.DrawDiffRect]: DiffRectProps;
+    [CommandType.DrawText]: TextProps;
+    [CommandType.DrawTextPath]: TextPathProps;
+    [CommandType.DrawTextBlob]: TextBlobProps;
+    [CommandType.DrawGlyphs]: GlyphsProps;
+    [CommandType.DrawPicture]: PictureProps;
+    [CommandType.DrawImageSVG]: ImageSVGProps;
+    [CommandType.DrawParagraph]: ParagraphProps;
+    [CommandType.DrawAtlas]: AtlasProps;
+    [CommandType.DrawSkottie]: SkottieProps;
+}
+interface DrawCommand<T extends CommandType> extends Command<T> {
+    props: T extends keyof Props ? Props[T] : never;
+}
+export declare const isDrawCommand: <T extends keyof Props>(command: Command, type: T) => command is DrawCommand<T>;
+export {};

package/lib/module/sksg/Recorder/Core.js

@@ -0,0 +1,84 @@
+import { isSharedValueSelector } from "../utils";
+export let CommandType = /*#__PURE__*/function (CommandType) {
+  // Context
+  CommandType[CommandType["Group"] = 0] = "Group";
+  CommandType[CommandType["SavePaint"] = 1] = "SavePaint";
+  CommandType[CommandType["RestorePaint"] = 2] = "RestorePaint";
+  CommandType[CommandType["SaveCTM"] = 3] = "SaveCTM";
+  CommandType[CommandType["RestoreCTM"] = 4] = "RestoreCTM";
+  CommandType[CommandType["PushColorFilter"] = 5] = "PushColorFilter";
+  CommandType[CommandType["PushBlurMaskFilter"] = 6] = "PushBlurMaskFilter";
+  CommandType[CommandType["PushImageFilter"] = 7] = "PushImageFilter";
+  CommandType[CommandType["PushPathEffect"] = 8] = "PushPathEffect";
+  CommandType[CommandType["PushShader"] = 9] = "PushShader";
+  CommandType[CommandType["ComposeColorFilter"] = 10] = "ComposeColorFilter";
+  CommandType[CommandType["ComposeImageFilter"] = 11] = "ComposeImageFilter";
+  CommandType[CommandType["ComposePathEffect"] = 12] = "ComposePathEffect";
+  CommandType[CommandType["MaterializePaint"] = 13] = "MaterializePaint";
+  CommandType[CommandType["SaveBackdropFilter"] = 14] = "SaveBackdropFilter";
+  CommandType[CommandType["SaveLayer"] = 15] = "SaveLayer";
+  CommandType[CommandType["RestorePaintDeclaration"] = 16] = "RestorePaintDeclaration";
+  // Drawing
+  CommandType[CommandType["DrawBox"] = 17] = "DrawBox";
+  CommandType[CommandType["DrawImage"] = 18] = "DrawImage";
+  CommandType[CommandType["DrawCircle"] = 19] = "DrawCircle";
+  CommandType[CommandType["DrawPaint"] = 20] = "DrawPaint";
+  CommandType[CommandType["DrawPoints"] = 21] = "DrawPoints";
+  CommandType[CommandType["DrawPath"] = 22] = "DrawPath";
+  CommandType[CommandType["DrawRect"] = 23] = "DrawRect";
+  CommandType[CommandType["DrawRRect"] = 24] = "DrawRRect";
+  CommandType[CommandType["DrawOval"] = 25] = "DrawOval";
+  CommandType[CommandType["DrawLine"] = 26] = "DrawLine";
+  CommandType[CommandType["DrawPatch"] = 27] = "DrawPatch";
+  CommandType[CommandType["DrawVertices"] = 28] = "DrawVertices";
+  CommandType[CommandType["DrawDiffRect"] = 29] = "DrawDiffRect";
+  CommandType[CommandType["DrawText"] = 30] = "DrawText";
+  CommandType[CommandType["DrawTextPath"] = 31] = "DrawTextPath";
+  CommandType[CommandType["DrawTextBlob"] = 32] = "DrawTextBlob";
+  CommandType[CommandType["DrawGlyphs"] = 33] = "DrawGlyphs";
+  CommandType[CommandType["DrawPicture"] = 34] = "DrawPicture";
+  CommandType[CommandType["DrawImageSVG"] = 35] = "DrawImageSVG";
+  CommandType[CommandType["DrawParagraph"] = 36] = "DrawParagraph";
+  CommandType[CommandType["DrawAtlas"] = 37] = "DrawAtlas";
+  CommandType[CommandType["DrawSkottie"] = 38] = "DrawSkottie";
+  return CommandType;
+}({});
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const materializeCommand = command => {
+  "worklet";
+
+  const newProps = {
+    ...command.props
+  };
+  if (command.animatedProps) {
+    for (const key in command.animatedProps) {
+      const entry = command.animatedProps[key];
+      if (isSharedValueSelector(entry)) {
+        const group = entry.__sv.value;
+        newProps[key] = group && typeof group === "object" ? group[entry.__key] : undefined;
+      } else {
+        newProps[key] = entry.value;
+      }
+    }
+  }
+  return {
+    ...command,
+    props: newProps
+  };
+};
+export const isCommand = (command, type) => {
+  "worklet";
+
+  return command.type === type;
+};
+export const isGroup = command => {
+  "worklet";
+
+  return command.type === CommandType.Group;
+};
+export const isDrawCommand = (command, type) => {
+  "worklet";
+
+  return command.type === type;
+};
+//# sourceMappingURL=Core.js.map

package/lib/module/sksg/Recorder/Core.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["isSharedValueSelector","CommandType","materializeCommand","command","newProps","props","animatedProps","key","entry","group","__sv","value","__key","undefined","isCommand","type","isGroup","Group","isDrawCommand"],"sources":["Core.ts"],"sourcesContent":["import type {\n  BlurMaskFilterProps,\n  CircleProps,\n  CTMProps,\n  ImageProps,\n  PointsProps,\n  PathProps,\n  RectProps,\n  RoundedRectProps,\n  OvalProps,\n  LineProps,\n  PatchProps,\n  VerticesProps,\n  DiffRectProps,\n  TextProps,\n  TextPathProps,\n  TextBlobProps,\n  GlyphsProps,\n  PictureProps,\n  ImageSVGProps,\n  ParagraphProps,\n  AtlasProps,\n  DrawingNodeProps,\n  SkottieProps,\n} from \"../../dom/types\";\nimport { isSharedValueSelector } from \"../utils\";\n\nexport enum CommandType {\n  // Context\n  Group,\n  SavePaint,\n  RestorePaint,\n  SaveCTM,\n  RestoreCTM,\n  PushColorFilter,\n  PushBlurMaskFilter,\n  PushImageFilter,\n  PushPathEffect,\n  PushShader,\n  ComposeColorFilter,\n  ComposeImageFilter,\n  ComposePathEffect,\n  MaterializePaint,\n  SaveBackdropFilter,\n  SaveLayer,\n  RestorePaintDeclaration,\n  // Drawing\n  DrawBox,\n  DrawImage,\n  DrawCircle,\n  DrawPaint,\n  DrawPoints,\n  DrawPath,\n  DrawRect,\n  DrawRRect,\n  DrawOval,\n  DrawLine,\n  DrawPatch,\n  DrawVertices,\n  DrawDiffRect,\n  DrawText,\n  DrawTextPath,\n  DrawTextBlob,\n  DrawGlyphs,\n  DrawPicture,\n  DrawImageSVG,\n  DrawParagraph,\n  DrawAtlas,\n  DrawSkottie,\n}\n\nexport type Command<T extends CommandType = CommandType> = {\n  type: T;\n  [key: string]: unknown;\n};\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport const materializeCommand = (command: any) => {\n  \"worklet\";\n  const newProps = { ...command.props };\n  if (command.animatedProps) {\n    for (const key in command.animatedProps) {\n      const entry = command.animatedProps[key];\n      if (isSharedValueSelector(entry)) {\n        const group = entry.__sv.value;\n        newProps[key] =\n          group && typeof group === \"object\"\n            ? (group as Record<string, unknown>)[entry.__key]\n            : undefined;\n      } else {\n        newProps[key] = entry.value;\n      }\n    }\n  }\n  return { ...command, props: newProps };\n};\n\nexport const isCommand = <T extends CommandType>(\n  command: Command,\n  type: T\n): command is Command<T> => {\n  \"worklet\";\n  return command.type === type;\n};\n\nexport interface GroupCommand extends Command<CommandType.Group> {\n  props?: Pick<DrawingNodeProps, \"zIndex\">;\n  children: Command[];\n}\n\nexport const isGroup = (command: Command): command is GroupCommand => {\n  \"worklet\";\n  return command.type === CommandType.Group;\n};\n\ninterface Props {\n  [CommandType.DrawImage]: ImageProps;\n  [CommandType.DrawCircle]: CircleProps;\n  [CommandType.SaveCTM]: CTMProps;\n  [CommandType.SavePaint]: DrawingNodeProps;\n  [CommandType.PushBlurMaskFilter]: BlurMaskFilterProps;\n  [CommandType.DrawPoints]: PointsProps;\n  [CommandType.DrawPath]: PathProps;\n  [CommandType.DrawRect]: RectProps;\n  [CommandType.DrawRRect]: RoundedRectProps;\n  [CommandType.DrawOval]: OvalProps;\n  [CommandType.DrawLine]: LineProps;\n  [CommandType.DrawPatch]: PatchProps;\n  [CommandType.DrawVertices]: VerticesProps;\n  [CommandType.DrawDiffRect]: DiffRectProps;\n  [CommandType.DrawText]: TextProps;\n  [CommandType.DrawTextPath]: TextPathProps;\n  [CommandType.DrawTextBlob]: TextBlobProps;\n  [CommandType.DrawGlyphs]: GlyphsProps;\n  [CommandType.DrawPicture]: PictureProps;\n  [CommandType.DrawImageSVG]: ImageSVGProps;\n  [CommandType.DrawParagraph]: ParagraphProps;\n  [CommandType.DrawAtlas]: AtlasProps;\n  [CommandType.DrawSkottie]: SkottieProps;\n}\n\ninterface DrawCommand<T extends CommandType> extends Command<T> {\n  props: T extends keyof Props ? Props[T] : never;\n}\n\nexport const isDrawCommand = <T extends keyof Props>(\n  command: Command,\n  type: T\n): command is DrawCommand<T> => {\n  \"worklet\";\n  return command.type === type;\n};\n"],"mappings":"AAyBA,SAASA,qBAAqB,QAAQ,UAAU;AAEhD,WAAYC,WAAW,0BAAXA,WAAW;EACrB;EADUA,WAAW,CAAXA,WAAW;EAAXA,WAAW,CAAXA,WAAW;EAAXA,WAAW,CAAXA,WAAW;EAAXA,WAAW,CAAXA,WAAW;EAAXA,WAAW,CAAXA,WAAW;EAAXA,WAAW,CAAXA,WAAW;EAAXA,WAAW,CAAXA,WAAW;EAAXA,WAAW,CAAXA,WAAW;EAAXA,WAAW,CAAXA,WAAW;EAAXA,WAAW,CAAXA,WAAW;EAAXA,WAAW,CAAXA,WAAW;EAAXA,WAAW,CAAXA,WAAW;EAAXA,WAAW,CAAXA,WAAW;EAAXA,WAAW,CAAXA,WAAW;EAAXA,WAAW,CAAXA,WAAW;EAAXA,WAAW,CAAXA,WAAW;EAAXA,WAAW,CAAXA,WAAW;EAmBrB;EAnBUA,WAAW,CAAXA,WAAW;EAAXA,WAAW,CAAXA,WAAW;EAAXA,WAAW,CAAXA,WAAW;EAAXA,WAAW,CAAXA,WAAW;EAAXA,WAAW,CAAXA,WAAW;EAAXA,WAAW,CAAXA,WAAW;EAAXA,WAAW,CAAXA,WAAW;EAAXA,WAAW,CAAXA,WAAW;EAAXA,WAAW,CAAXA,WAAW;EAAXA,WAAW,CAAXA,WAAW;EAAXA,WAAW,CAAXA,WAAW;EAAXA,WAAW,CAAXA,WAAW;EAAXA,WAAW,CAAXA,WAAW;EAAXA,WAAW,CAAXA,WAAW;EAAXA,WAAW,CAAXA,WAAW;EAAXA,WAAW,CAAXA,WAAW;EAAXA,WAAW,CAAXA,WAAW;EAAXA,WAAW,CAAXA,WAAW;EAAXA,WAAW,CAAXA,WAAW;EAAXA,WAAW,CAAXA,WAAW;EAAXA,WAAW,CAAXA,WAAW;EAAXA,WAAW,CAAXA,WAAW;EAAA,OAAXA,WAAW;AAAA;AAiDvB;AACA,OAAO,MAAMC,kBAAkB,GAAIC,OAAY,IAAK;EAClD,SAAS;;EACT,MAAMC,QAAQ,GAAG;IAAE,GAAGD,OAAO,CAACE;EAAM,CAAC;EACrC,IAAIF,OAAO,CAACG,aAAa,EAAE;IACzB,KAAK,MAAMC,GAAG,IAAIJ,OAAO,CAACG,aAAa,EAAE;MACvC,MAAME,KAAK,GAAGL,OAAO,CAACG,aAAa,CAACC,GAAG,CAAC;MACxC,IAAIP,qBAAqB,CAACQ,KAAK,CAAC,EAAE;QAChC,MAAMC,KAAK,GAAGD,KAAK,CAACE,IAAI,CAACC,KAAK;QAC9BP,QAAQ,CAACG,GAAG,CAAC,GACXE,KAAK,IAAI,OAAOA,KAAK,KAAK,QAAQ,GAC7BA,KAAK,CAA6BD,KAAK,CAACI,KAAK,CAAC,GAC/CC,SAAS;MACjB,CAAC,MAAM;QACLT,QAAQ,CAACG,GAAG,CAAC,GAAGC,KAAK,CAACG,KAAK;MAC7B;IACF;EACF;EACA,OAAO;IAAE,GAAGR,OAAO;IAAEE,KAAK,EAAED;EAAS,CAAC;AACxC,CAAC;AAED,OAAO,MAAMU,SAAS,GAAGA,CACvBX,OAAgB,EAChBY,IAAO,KACmB;EAC1B,SAAS;;EACT,OAAOZ,OAAO,CAACY,IAAI,KAAKA,IAAI;AAC9B,CAAC;AAOD,OAAO,MAAMC,OAAO,GAAIb,OAAgB,IAA8B;EACpE,SAAS;;EACT,OAAOA,OAAO,CAACY,IAAI,KAAKd,WAAW,CAACgB,KAAK;AAC3C,CAAC;AAgCD,OAAO,MAAMC,aAAa,GAAGA,CAC3Bf,OAAgB,EAChBY,IAAO,KACuB;EAC9B,SAAS;;EACT,OAAOZ,OAAO,CAACY,IAAI,KAAKA,IAAI;AAC9B,CAAC","ignoreList":[]}

package/lib/module/sksg/Recorder/Debug.d.ts

@@ -0,0 +1,2 @@
+import type { Command } from "./Core";
+export declare const debugTree: (commands: Command[], indent?: number) => string;

package/lib/module/sksg/Recorder/Debug.js

@@ -0,0 +1,79 @@
+import { CommandType, isGroup } from "./Core";
+const CommandTypeNames = {
+  [CommandType.Group]: "Group",
+  [CommandType.SavePaint]: "SavePaint",
+  [CommandType.RestorePaint]: "RestorePaint",
+  [CommandType.SaveCTM]: "SaveCTM",
+  [CommandType.RestoreCTM]: "RestoreCTM",
+  [CommandType.PushColorFilter]: "PushColorFilter",
+  [CommandType.PushBlurMaskFilter]: "PushBlurMaskFilter",
+  [CommandType.PushImageFilter]: "PushImageFilter",
+  [CommandType.PushPathEffect]: "PushPathEffect",
+  [CommandType.PushShader]: "PushShader",
+  [CommandType.ComposeColorFilter]: "ComposeColorFilter",
+  [CommandType.ComposeImageFilter]: "ComposeImageFilter",
+  [CommandType.ComposePathEffect]: "ComposePathEffect",
+  [CommandType.MaterializePaint]: "MaterializePaint",
+  [CommandType.SaveBackdropFilter]: "SaveBackdropFilter",
+  [CommandType.SaveLayer]: "SaveLayer",
+  [CommandType.RestorePaintDeclaration]: "RestorePaintDeclaration",
+  [CommandType.DrawBox]: "DrawBox",
+  [CommandType.DrawImage]: "DrawImage",
+  [CommandType.DrawCircle]: "DrawCircle",
+  [CommandType.DrawPaint]: "DrawPaint",
+  [CommandType.DrawPoints]: "DrawPoints",
+  [CommandType.DrawPath]: "DrawPath",
+  [CommandType.DrawRect]: "DrawRect",
+  [CommandType.DrawRRect]: "DrawRRect",
+  [CommandType.DrawOval]: "DrawOval",
+  [CommandType.DrawLine]: "DrawLine",
+  [CommandType.DrawPatch]: "DrawPatch",
+  [CommandType.DrawVertices]: "DrawVertices",
+  [CommandType.DrawDiffRect]: "DrawDiffRect",
+  [CommandType.DrawText]: "DrawText",
+  [CommandType.DrawTextPath]: "DrawTextPath",
+  [CommandType.DrawTextBlob]: "DrawTextBlob",
+  [CommandType.DrawGlyphs]: "DrawGlyphs",
+  [CommandType.DrawPicture]: "DrawPicture",
+  [CommandType.DrawImageSVG]: "DrawImageSVG",
+  [CommandType.DrawParagraph]: "DrawParagraph",
+  [CommandType.DrawAtlas]: "DrawAtlas",
+  [CommandType.DrawSkottie]: "DrawSkottie"
+};
+const serializeProps = props => {
+  try {
+    return JSON.stringify(props, (key, value) => {
+      if (key === "children") {
+        return undefined;
+      }
+      if (typeof value === "bigint") {
+        return value.toString();
+      }
+      return value;
+    });
+  } catch (e) {
+    return `"Error serializing props: ${e}"`;
+  }
+};
+export const debugTree = (commands, indent = 0) => {
+  let result = "[\n";
+  const prefix = " ".repeat(indent + 2);
+  commands.forEach((cmd, index) => {
+    const type = CommandTypeNames[cmd.type] || "Unknown";
+    result += `${prefix}{ "type": "${type}"`;
+    if ("props" in cmd) {
+      result += `, "props": ${serializeProps(cmd.props)}`;
+    }
+    if (isGroup(cmd)) {
+      result += `, "children": ${debugTree(cmd.children, indent + 2)}`;
+    }
+    result += " }";
+    if (index < commands.length - 1) {
+      result += ",";
+    }
+    result += "\n";
+  });
+  result += " ".repeat(indent) + "]";
+  return result;
+};
+//# sourceMappingURL=Debug.js.map

package/lib/module/sksg/Recorder/Debug.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["CommandType","isGroup","CommandTypeNames","Group","SavePaint","RestorePaint","SaveCTM","RestoreCTM","PushColorFilter","PushBlurMaskFilter","PushImageFilter","PushPathEffect","PushShader","ComposeColorFilter","ComposeImageFilter","ComposePathEffect","MaterializePaint","SaveBackdropFilter","SaveLayer","RestorePaintDeclaration","DrawBox","DrawImage","DrawCircle","DrawPaint","DrawPoints","DrawPath","DrawRect","DrawRRect","DrawOval","DrawLine","DrawPatch","DrawVertices","DrawDiffRect","DrawText","DrawTextPath","DrawTextBlob","DrawGlyphs","DrawPicture","DrawImageSVG","DrawParagraph","DrawAtlas","DrawSkottie","serializeProps","props","JSON","stringify","key","value","undefined","toString","e","debugTree","commands","indent","result","prefix","repeat","forEach","cmd","index","type","children","length"],"sources":["Debug.ts"],"sourcesContent":["import { CommandType, isGroup } from \"./Core\";\nimport type { Command } from \"./Core\";\n\nconst CommandTypeNames: Record<CommandType, string> = {\n  [CommandType.Group]: \"Group\",\n  [CommandType.SavePaint]: \"SavePaint\",\n  [CommandType.RestorePaint]: \"RestorePaint\",\n  [CommandType.SaveCTM]: \"SaveCTM\",\n  [CommandType.RestoreCTM]: \"RestoreCTM\",\n  [CommandType.PushColorFilter]: \"PushColorFilter\",\n  [CommandType.PushBlurMaskFilter]: \"PushBlurMaskFilter\",\n  [CommandType.PushImageFilter]: \"PushImageFilter\",\n  [CommandType.PushPathEffect]: \"PushPathEffect\",\n  [CommandType.PushShader]: \"PushShader\",\n  [CommandType.ComposeColorFilter]: \"ComposeColorFilter\",\n  [CommandType.ComposeImageFilter]: \"ComposeImageFilter\",\n  [CommandType.ComposePathEffect]: \"ComposePathEffect\",\n  [CommandType.MaterializePaint]: \"MaterializePaint\",\n  [CommandType.SaveBackdropFilter]: \"SaveBackdropFilter\",\n  [CommandType.SaveLayer]: \"SaveLayer\",\n  [CommandType.RestorePaintDeclaration]: \"RestorePaintDeclaration\",\n  [CommandType.DrawBox]: \"DrawBox\",\n  [CommandType.DrawImage]: \"DrawImage\",\n  [CommandType.DrawCircle]: \"DrawCircle\",\n  [CommandType.DrawPaint]: \"DrawPaint\",\n  [CommandType.DrawPoints]: \"DrawPoints\",\n  [CommandType.DrawPath]: \"DrawPath\",\n  [CommandType.DrawRect]: \"DrawRect\",\n  [CommandType.DrawRRect]: \"DrawRRect\",\n  [CommandType.DrawOval]: \"DrawOval\",\n  [CommandType.DrawLine]: \"DrawLine\",\n  [CommandType.DrawPatch]: \"DrawPatch\",\n  [CommandType.DrawVertices]: \"DrawVertices\",\n  [CommandType.DrawDiffRect]: \"DrawDiffRect\",\n  [CommandType.DrawText]: \"DrawText\",\n  [CommandType.DrawTextPath]: \"DrawTextPath\",\n  [CommandType.DrawTextBlob]: \"DrawTextBlob\",\n  [CommandType.DrawGlyphs]: \"DrawGlyphs\",\n  [CommandType.DrawPicture]: \"DrawPicture\",\n  [CommandType.DrawImageSVG]: \"DrawImageSVG\",\n  [CommandType.DrawParagraph]: \"DrawParagraph\",\n  [CommandType.DrawAtlas]: \"DrawAtlas\",\n  [CommandType.DrawSkottie]: \"DrawSkottie\",\n};\n\nconst serializeProps = (props: unknown): string => {\n  try {\n    return JSON.stringify(props, (key, value) => {\n      if (key === \"children\") {\n        return undefined;\n      }\n      if (typeof value === \"bigint\") {\n        return value.toString();\n      }\n      return value;\n    });\n  } catch (e) {\n    return `\"Error serializing props: ${e}\"`;\n  }\n};\n\nexport const debugTree = (commands: Command[], indent = 0): string => {\n  let result = \"[\\n\";\n  const prefix = \" \".repeat(indent + 2);\n\n  commands.forEach((cmd, index) => {\n    const type = CommandTypeNames[cmd.type] || \"Unknown\";\n    result += `${prefix}{ \"type\": \"${type}\"`;\n\n    if (\"props\" in cmd) {\n      result += `, \"props\": ${serializeProps(cmd.props)}`;\n    }\n\n    if (isGroup(cmd)) {\n      result += `, \"children\": ${debugTree(cmd.children, indent + 2)}`;\n    }\n\n    result += \" }\";\n    if (index < commands.length - 1) {\n      result += \",\";\n    }\n    result += \"\\n\";\n  });\n\n  result += \" \".repeat(indent) + \"]\";\n  return result;\n};\n"],"mappings":"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","ignoreList":[]}

package/lib/module/sksg/Recorder/DrawingContext.d.ts

@@ -0,0 +1,23 @@
+import type { Skia, SkCanvas, SkColorFilter, SkPaint, SkShader, SkImageFilter, SkPathEffect } from "../../skia/types";
+export declare const createDrawingContext: (Skia: Skia, paintPool: SkPaint[], canvas: SkCanvas) => {
+    Skia: Skia;
+    canvas: SkCanvas;
+    track: <T>(value: T) => T;
+    dispose: () => void;
+    paints: SkPaint[];
+    colorFilters: SkColorFilter[];
+    shaders: SkShader[];
+    imageFilters: SkImageFilter[];
+    pathEffects: SkPathEffect[];
+    paintDeclarations: SkPaint[];
+    paintPool: SkPaint[];
+    savePaint: () => void;
+    pushPaint: (paint: SkPaint) => void;
+    saveBackdropFilter: () => void;
+    readonly paint: SkPaint;
+    restorePaint: () => SkPaint | undefined;
+    materializePaint: () => void;
+    getOpacity: () => number;
+    setOpacity: (newOpacity: number) => void;
+};
+export type DrawingContext = ReturnType<typeof createDrawingContext>;

package/lib/module/sksg/Recorder/DrawingContext.js

@@ -0,0 +1,142 @@
+import { createFrameScope } from "./FrameScope";
+export const createDrawingContext = (Skia, paintPool, canvas) => {
+  "worklet";
+
+  // Everything the renderer creates through frameSkia is frame-scoped and
+  // deleted by dispose() once the frame has been recorded. The paint pool is
+  // recording-scoped and deliberately allocated with the raw Skia instance.
+  const {
+    Skia: frameSkia,
+    track,
+    dispose
+  } = createFrameScope(Skia);
+
+  // State (formerly class fields)
+  const paints = [];
+  const colorFilters = [];
+  const shaders = [];
+  const imageFilters = [];
+  const pathEffects = [];
+  const paintDeclarations = [];
+  const opacities = [];
+  let nextPaintIndex = 1;
+
+  // Initialize first paint and opacity
+  if (paintPool.length === 0) {
+    paintPool.push(Skia.Paint());
+  } else {
+    // reset() produces an anti-alias false paint, unlike the Skia.Paint()
+    // factory: restore the default so reused pools render like the first frame.
+    paintPool[0].reset();
+    paintPool[0].setAntiAlias(true);
+  }
+  paints.push(paintPool[0]);
+  opacities.push(1);
+
+  // Methods (formerly class methods)
+  const savePaint = () => {
+    // Get next available paint from pool or create new one if needed
+    if (nextPaintIndex >= paintPool.length) {
+      paintPool.push(Skia.Paint());
+    }
+    const nextPaint = paintPool[nextPaintIndex];
+    nextPaint.assign(getCurrentPaint()); // Reuse allocation by copying properties
+    paints.push(nextPaint);
+    opacities.push(opacities[opacities.length - 1]);
+    nextPaintIndex++;
+  };
+
+  // Pushes an externally owned paint (the `paint` prop) onto the stack. It
+  // pushes a frame-scoped copy, like the C++ DrawingCtx: materializePaint()
+  // mutates the top of the stack, and those mutations must not leak into the
+  // user-owned paint. It must also push an opacity alongside it: restorePaint()
+  // pops both, so pushing only the paint would underflow the opacity stack and
+  // leak the enclosing group's opacity onto everything drawn afterwards.
+  const pushPaint = paint => {
+    paints.push(track(paint.copy()));
+    opacities.push(opacities[opacities.length - 1]);
+  };
+  const getOpacity = () => {
+    return opacities[opacities.length - 1];
+  };
+  const setOpacity = newOpacity => {
+    opacities[opacities.length - 1] = Math.max(0, Math.min(1, newOpacity));
+  };
+  const saveBackdropFilter = () => {
+    let imageFilter = null;
+    const imgf = imageFilters.pop();
+    if (imgf) {
+      imageFilter = imgf;
+    } else {
+      const cf = colorFilters.pop();
+      if (cf) {
+        imageFilter = frameSkia.ImageFilter.MakeColorFilter(cf, null);
+      }
+    }
+    canvas.saveLayer(undefined, null, imageFilter);
+    canvas.restore();
+  };
+
+  // Equivalent to the `get paint()` getter in the original class
+  const getCurrentPaint = () => {
+    return paints[paints.length - 1];
+  };
+  const restorePaint = () => {
+    opacities.pop();
+    return paints.pop();
+  };
+  const materializePaint = () => {
+    // Color Filters
+    if (colorFilters.length > 0) {
+      getCurrentPaint().setColorFilter(colorFilters.reduceRight((inner, outer) => inner ? frameSkia.ColorFilter.MakeCompose(outer, inner) : outer));
+    }
+    // Shaders
+    if (shaders.length > 0) {
+      getCurrentPaint().setShader(shaders[shaders.length - 1]);
+    }
+    // Image Filters
+    if (imageFilters.length > 0) {
+      getCurrentPaint().setImageFilter(imageFilters.reduceRight((inner, outer) => inner ? frameSkia.ImageFilter.MakeCompose(outer, inner) : outer));
+    }
+
+    // Path Effects
+    if (pathEffects.length > 0) {
+      getCurrentPaint().setPathEffect(pathEffects.reduceRight((inner, outer) => inner ? frameSkia.PathEffect.MakeCompose(outer, inner) : outer));
+    }
+
+    // Clear arrays
+    colorFilters.length = 0;
+    shaders.length = 0;
+    imageFilters.length = 0;
+    pathEffects.length = 0;
+  };
+
+  // Return an object containing the Skia reference, the canvas, and the methods
+  return {
+    // Public fields
+    Skia: frameSkia,
+    canvas,
+    track,
+    dispose,
+    paints,
+    colorFilters,
+    shaders,
+    imageFilters,
+    pathEffects,
+    paintDeclarations,
+    paintPool,
+    // Public methods
+    savePaint,
+    pushPaint,
+    saveBackdropFilter,
+    get paint() {
+      return paints[paints.length - 1];
+    },
+    // the "getter" for the current paint
+    restorePaint,
+    materializePaint,
+    getOpacity,
+    setOpacity
+  };
+};
+//# sourceMappingURL=DrawingContext.js.map