@shopify/react-native-skia 1.7.6 → 1.8.0

package/lib/commonjs/sksg/Reconciler.js

@@ -0,0 +1,61 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SkiaSGRoot = void 0;
+var _reactReconciler = _interopRequireDefault(require("react-reconciler"));
+var _types = require("../dom/types");
+var _HostConfig = require("./HostConfig");
+var _Container = require("./Container");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+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); }
+const skiaReconciler = (0, _reactReconciler.default)(_HostConfig.sksgHostConfig);
+skiaReconciler.injectIntoDevTools({
+  bundleType: 1,
+  version: "0.0.1",
+  rendererPackageName: "react-native-skia"
+});
+class SkiaSGRoot {
+  constructor(Skia, nativeId = -1) {
+    this.Skia = Skia;
+    _defineProperty(this, "root", void 0);
+    _defineProperty(this, "container", void 0);
+    this.container = new _Container.Container(Skia, nativeId);
+    this.root = skiaReconciler.createContainer(this.container, 0, null, true, null, "", console.error, null);
+  }
+  get sg() {
+    const children = this.container.root;
+    return {
+      type: _types.NodeType.Group,
+      props: {},
+      children,
+      isDeclaration: false
+    };
+  }
+  render(element) {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    skiaReconciler.updateContainer(element, this.root, null, () => {
+      (0, _HostConfig.debug)("updateContainer");
+    });
+  }
+  drawOnCanvas(canvas) {
+    this.container.drawOnCanvas(canvas);
+  }
+  getPicture() {
+    const recorder = this.Skia.PictureRecorder();
+    const canvas = recorder.beginRecording();
+    this.drawOnCanvas(canvas);
+    return recorder.finishRecordingAsPicture();
+  }
+  unmount() {
+    this.container.unmounted = true;
+    skiaReconciler.updateContainer(null, this.root, null, () => {
+      (0, _HostConfig.debug)("unmountContainer");
+    });
+  }
+}
+exports.SkiaSGRoot = SkiaSGRoot;
+//# sourceMappingURL=Reconciler.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["_reactReconciler","_interopRequireDefault","require","_types","_HostConfig","_Container","e","__esModule","default","_defineProperty","r","t","_toPropertyKey","Object","defineProperty","value","enumerable","configurable","writable","i","_toPrimitive","Symbol","toPrimitive","call","TypeError","String","Number","skiaReconciler","ReactReconciler","sksgHostConfig","injectIntoDevTools","bundleType","version","rendererPackageName","SkiaSGRoot","constructor","Skia","nativeId","container","Container","root","createContainer","console","error","sg","children","type","NodeType","Group","props","isDeclaration","render","element","updateContainer","debug","drawOnCanvas","canvas","getPicture","recorder","PictureRecorder","beginRecording","finishRecordingAsPicture","unmount","unmounted","exports"],"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 { Container } from \"./Container\";\n\nconst skiaReconciler = ReactReconciler(sksgHostConfig);\n\nskiaReconciler.injectIntoDevTools({\n  bundleType: 1,\n  version: \"0.0.1\",\n  rendererPackageName: \"react-native-skia\",\n});\n\nexport class SkiaSGRoot {\n  private root: OpaqueRoot;\n  private container: Container;\n\n  constructor(public Skia: Skia, nativeId = -1) {\n    this.container = new Container(Skia, nativeId);\n    this.root = skiaReconciler.createContainer(\n      this.container,\n      0,\n      null,\n      true,\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  render(element: ReactNode) {\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    skiaReconciler.updateContainer(element as any, this.root, null, () => {\n      debug(\"updateContainer\");\n    });\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    return recorder.finishRecordingAsPicture();\n  }\n\n  unmount() {\n    this.container.unmounted = true;\n    skiaReconciler.updateContainer(null, this.root, null, () => {\n      debug(\"unmountContainer\");\n    });\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/lib/commonjs/sksg/__tests__/MockDeclaration.d.ts

@@ -0,0 +1,57 @@
+export declare enum DeclarationType {
+    ColorFilter = 0,
+    ImageFilter = 1,
+    Shader = 2,
+    MaskFilter = 3,
+    PathEffect = 4,
+    Paint = 5
+}
+interface Filter {
+    tag: string;
+}
+export interface SkColorFilter extends Filter {
+    type: DeclarationType.ColorFilter;
+}
+interface SkImageFilter extends Filter {
+    type: DeclarationType.ImageFilter;
+}
+interface SkShader extends Filter {
+    type: DeclarationType.Shader;
+}
+interface SkMaskFilter extends Filter {
+    type: DeclarationType.MaskFilter;
+}
+interface SkPathEffect extends Filter {
+    type: DeclarationType.PathEffect;
+}
+interface SkPaint extends Filter {
+    type: DeclarationType.Paint;
+}
+type Composer<T> = (outer: T, inner: T) => T;
+export declare const compose: any;
+export declare const composeDeclarations: <T>(filters: T[], composer: Composer<T>) => T;
+declare class Declaration<T extends Filter> {
+    decls: T[];
+    indexes: number[];
+    composer?: Composer<T>;
+    constructor(composer?: Composer<T>);
+    private get index();
+    save(): void;
+    restore(): void;
+    pop(): T | undefined;
+    push(decl: T): void;
+    popAll(): T[];
+    popAllAsOne(): T | undefined;
+}
+export declare class DeclarationContext {
+    readonly paints: Declaration<SkPaint>;
+    readonly maskFilters: Declaration<SkMaskFilter>;
+    readonly shaders: Declaration<SkShader>;
+    readonly pathEffects: Declaration<SkPathEffect>;
+    readonly imageFilters: Declaration<SkImageFilter>;
+    readonly colorFilters: Declaration<SkColorFilter>;
+    constructor();
+    save(): void;
+    restore(): void;
+}
+export {};

package/lib/commonjs/sksg/nodes/Node.d.ts

@@ -0,0 +1,7 @@
+import type { NodeType } from "../../dom/types";
+export interface Node<Props = unknown> {
+    type: NodeType;
+    isDeclaration: boolean;
+    props: Props;
+    children: Node[];
+}

package/lib/commonjs/{renderer/DrawingContext.js → sksg/nodes/Node.js}

@@ -3,4 +3,4 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-//# sourceMappingURL=DrawingContext.js.map
+//# sourceMappingURL=Node.js.map

package/lib/commonjs/sksg/nodes/Node.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["Node.ts"],"sourcesContent":["import type { NodeType } from \"../../dom/types\";\n\nexport interface Node<Props = unknown> {\n  type: NodeType;\n  isDeclaration: boolean;\n  props: Props;\n  children: Node[];\n}\n"],"mappings":"","ignoreList":[]}

package/lib/commonjs/sksg/nodes/colorFilters.d.ts

@@ -0,0 +1,10 @@
+import type { BlendColorFilterProps, LerpColorFilterProps, MatrixColorFilterProps } from "../../dom/types";
+import type { SkColorFilter } from "../../skia/types";
+import type { DeclarationContext } from "../DeclarationContext";
+export declare const composeColorFilters: (ctx: DeclarationContext, cf: SkColorFilter, processChildren: () => void) => void;
+export declare const makeBlendColorFilter: (ctx: DeclarationContext, props: BlendColorFilterProps) => SkColorFilter;
+export declare const makeSRGBToLinearGammaColorFilter: (ctx: DeclarationContext) => SkColorFilter;
+export declare const makeLinearToSRGBGammaColorFilter: (ctx: DeclarationContext) => SkColorFilter;
+export declare const declareLerpColorFilter: (ctx: DeclarationContext, props: LerpColorFilterProps) => void;
+export declare const makeMatrixColorFilter: (ctx: DeclarationContext, props: MatrixColorFilterProps) => SkColorFilter;
+export declare const makeLumaColorFilter: (ctx: DeclarationContext) => SkColorFilter;

package/lib/commonjs/sksg/nodes/colorFilters.js

@@ -0,0 +1,79 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.makeSRGBToLinearGammaColorFilter = exports.makeMatrixColorFilter = exports.makeLumaColorFilter = exports.makeLinearToSRGBGammaColorFilter = exports.makeBlendColorFilter = exports.declareLerpColorFilter = exports.composeColorFilters = void 0;
+var _nodes = require("../../dom/nodes");
+var _types = require("../../skia/types");
+const composeColorFilters = (ctx, cf, processChildren) => {
+  "worklet";
+
+  const {
+    Skia
+  } = ctx;
+  ctx.colorFilters.save();
+  processChildren();
+  const cf1 = ctx.colorFilters.popAllAsOne();
+  ctx.colorFilters.restore();
+  ctx.colorFilters.push(cf1 ? Skia.ColorFilter.MakeCompose(cf, cf1) : cf);
+};
+exports.composeColorFilters = composeColorFilters;
+const makeBlendColorFilter = (ctx, props) => {
+  "worklet";
+
+  const {
+    mode
+  } = props;
+  const color = ctx.Skia.Color(props.color);
+  const cf = ctx.Skia.ColorFilter.MakeBlend(color, _types.BlendMode[(0, _nodes.enumKey)(mode)]);
+  return cf;
+};
+exports.makeBlendColorFilter = makeBlendColorFilter;
+const makeSRGBToLinearGammaColorFilter = ctx => {
+  "worklet";
+
+  const cf = ctx.Skia.ColorFilter.MakeSRGBToLinearGamma();
+  return cf;
+};
+exports.makeSRGBToLinearGammaColorFilter = makeSRGBToLinearGammaColorFilter;
+const makeLinearToSRGBGammaColorFilter = ctx => {
+  "worklet";
+
+  const cf = ctx.Skia.ColorFilter.MakeLinearToSRGBGamma();
+  return cf;
+};
+exports.makeLinearToSRGBGammaColorFilter = makeLinearToSRGBGammaColorFilter;
+const declareLerpColorFilter = (ctx, props) => {
+  "worklet";
+
+  const {
+    t
+  } = props;
+  const second = ctx.colorFilters.pop();
+  const first = ctx.colorFilters.pop();
+  if (!first || !second) {
+    throw new Error("LerpColorFilterNode: missing two color filters as children");
+  }
+  const cf = ctx.Skia.ColorFilter.MakeLerp(t, first, second);
+  ctx.colorFilters.push(cf);
+};
+exports.declareLerpColorFilter = declareLerpColorFilter;
+const makeMatrixColorFilter = (ctx, props) => {
+  "worklet";
+
+  const {
+    matrix
+  } = props;
+  const cf = ctx.Skia.ColorFilter.MakeMatrix(matrix);
+  return cf;
+};
+exports.makeMatrixColorFilter = makeMatrixColorFilter;
+const makeLumaColorFilter = ctx => {
+  "worklet";
+
+  const cf = ctx.Skia.ColorFilter.MakeLumaColorFilter();
+  return cf;
+};
+exports.makeLumaColorFilter = makeLumaColorFilter;
+//# sourceMappingURL=colorFilters.js.map

package/lib/commonjs/sksg/nodes/colorFilters.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_nodes","require","_types","composeColorFilters","ctx","cf","processChildren","Skia","colorFilters","save","cf1","popAllAsOne","restore","push","ColorFilter","MakeCompose","exports","makeBlendColorFilter","props","mode","color","Color","MakeBlend","BlendMode","enumKey","makeSRGBToLinearGammaColorFilter","MakeSRGBToLinearGamma","makeLinearToSRGBGammaColorFilter","MakeLinearToSRGBGamma","declareLerpColorFilter","t","second","pop","first","Error","MakeLerp","makeMatrixColorFilter","matrix","MakeMatrix","makeLumaColorFilter","MakeLumaColorFilter"],"sources":["colorFilters.ts"],"sourcesContent":["import { enumKey } from \"../../dom/nodes\";\nimport type {\n  BlendColorFilterProps,\n  LerpColorFilterProps,\n  MatrixColorFilterProps,\n} from \"../../dom/types\";\nimport type { SkColorFilter } from \"../../skia/types\";\nimport { BlendMode } from \"../../skia/types\";\nimport type { DeclarationContext } from \"../DeclarationContext\";\n\nexport const composeColorFilters = (\n  ctx: DeclarationContext,\n  cf: SkColorFilter,\n  processChildren: () => void\n) => {\n  \"worklet\";\n  const { Skia } = ctx;\n  ctx.colorFilters.save();\n  processChildren();\n  const cf1 = ctx.colorFilters.popAllAsOne();\n  ctx.colorFilters.restore();\n  ctx.colorFilters.push(cf1 ? Skia.ColorFilter.MakeCompose(cf, cf1) : cf);\n};\n\nexport const makeBlendColorFilter = (\n  ctx: DeclarationContext,\n  props: BlendColorFilterProps\n) => {\n  \"worklet\";\n  const { mode } = props;\n  const color = ctx.Skia.Color(props.color);\n  const cf = ctx.Skia.ColorFilter.MakeBlend(color, BlendMode[enumKey(mode)]);\n  return cf;\n};\n\nexport const makeSRGBToLinearGammaColorFilter = (ctx: DeclarationContext) => {\n  \"worklet\";\n  const cf = ctx.Skia.ColorFilter.MakeSRGBToLinearGamma();\n  return cf;\n};\n\nexport const makeLinearToSRGBGammaColorFilter = (ctx: DeclarationContext) => {\n  \"worklet\";\n  const cf = ctx.Skia.ColorFilter.MakeLinearToSRGBGamma();\n  return cf;\n};\n\nexport const declareLerpColorFilter = (\n  ctx: DeclarationContext,\n  props: LerpColorFilterProps\n) => {\n  \"worklet\";\n  const { t } = props;\n  const second = ctx.colorFilters.pop();\n  const first = ctx.colorFilters.pop();\n  if (!first || !second) {\n    throw new Error(\n      \"LerpColorFilterNode: missing two color filters as children\"\n    );\n  }\n  const cf = ctx.Skia.ColorFilter.MakeLerp(t, first, second);\n  ctx.colorFilters.push(cf);\n};\n\nexport const makeMatrixColorFilter = (\n  ctx: DeclarationContext,\n  props: MatrixColorFilterProps\n) => {\n  \"worklet\";\n  const { matrix } = props;\n  const cf = ctx.Skia.ColorFilter.MakeMatrix(matrix);\n  return cf;\n};\n\nexport const makeLumaColorFilter = (ctx: DeclarationContext) => {\n  \"worklet\";\n  const cf = ctx.Skia.ColorFilter.MakeLumaColorFilter();\n  return cf;\n};\n"],"mappings":"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","ignoreList":[]}

package/lib/commonjs/sksg/nodes/context.d.ts

@@ -0,0 +1,3 @@
+import type { DrawingContext } from "../DrawingContext";
+import type { Node } from "./Node";
+export declare function draw(ctx: DrawingContext, node: Node<any>): void;

package/lib/commonjs/sksg/nodes/context.js

@@ -0,0 +1,394 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.draw = draw;
+var _types = require("../../dom/types");
+var _DeclarationContext = require("../DeclarationContext");
+var _drawings = require("./drawings");
+var _colorFilters = require("./colorFilters");
+var _imageFilters = require("./imageFilters");
+var _utils = require("./utils");
+var _shaders = require("./shaders");
+var _paint = require("./paint");
+var _pathEffects = require("./pathEffects");
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+function processDeclarations(ctx, node) {
+  "worklet";
+
+  const processChildren = () => node.children.forEach(child => processDeclarations(ctx, child));
+  const {
+    type
+  } = node;
+  const props = (0, _utils.materialize)(node.props);
+  switch (type) {
+    // Mask Filter
+    case _types.NodeType.BlurMaskFilter:
+      {
+        (0, _imageFilters.declareBlurMaskFilter)(ctx, props);
+        break;
+      }
+    // Color Filters
+    case _types.NodeType.LerpColorFilter:
+      {
+        processChildren();
+        (0, _colorFilters.declareLerpColorFilter)(ctx, props);
+        break;
+      }
+    case _types.NodeType.Blend:
+      {
+        processChildren();
+        (0, _imageFilters.declareBlend)(ctx, props);
+        break;
+      }
+    case _types.NodeType.BlendColorFilter:
+      {
+        const cf = (0, _colorFilters.makeBlendColorFilter)(ctx, props);
+        (0, _colorFilters.composeColorFilters)(ctx, cf, processChildren);
+        break;
+      }
+    case _types.NodeType.SRGBToLinearGammaColorFilter:
+      {
+        const cf = (0, _colorFilters.makeSRGBToLinearGammaColorFilter)(ctx);
+        (0, _colorFilters.composeColorFilters)(ctx, cf, processChildren);
+        break;
+      }
+    case _types.NodeType.LinearToSRGBGammaColorFilter:
+      {
+        const cf = (0, _colorFilters.makeLinearToSRGBGammaColorFilter)(ctx);
+        (0, _colorFilters.composeColorFilters)(ctx, cf, processChildren);
+        break;
+      }
+    case _types.NodeType.MatrixColorFilter:
+      {
+        const cf = (0, _colorFilters.makeMatrixColorFilter)(ctx, props);
+        (0, _colorFilters.composeColorFilters)(ctx, cf, processChildren);
+        break;
+      }
+    case _types.NodeType.LumaColorFilter:
+      {
+        const cf = (0, _colorFilters.makeLumaColorFilter)(ctx);
+        (0, _colorFilters.composeColorFilters)(ctx, cf, processChildren);
+        break;
+      }
+    // Shaders
+    case _types.NodeType.Shader:
+      {
+        processChildren();
+        (0, _shaders.declareShader)(ctx, props);
+        break;
+      }
+    case _types.NodeType.ImageShader:
+      {
+        (0, _shaders.declareImageShader)(ctx, props);
+        break;
+      }
+    case _types.NodeType.ColorShader:
+      {
+        (0, _shaders.declareColorShader)(ctx, props);
+        break;
+      }
+    case _types.NodeType.Turbulence:
+      {
+        (0, _shaders.declareTurbulenceShader)(ctx, props);
+        break;
+      }
+    case _types.NodeType.FractalNoise:
+      {
+        (0, _shaders.declareFractalNoiseShader)(ctx, props);
+        break;
+      }
+    case _types.NodeType.LinearGradient:
+      {
+        (0, _shaders.declareLinearGradientShader)(ctx, props);
+        break;
+      }
+    case _types.NodeType.RadialGradient:
+      {
+        (0, _shaders.declareRadialGradientShader)(ctx, props);
+        break;
+      }
+    case _types.NodeType.SweepGradient:
+      {
+        (0, _shaders.declareSweepGradientShader)(ctx, props);
+        break;
+      }
+    case _types.NodeType.TwoPointConicalGradient:
+      {
+        (0, _shaders.declareTwoPointConicalGradientShader)(ctx, props);
+        break;
+      }
+    // Image Filters
+    case _types.NodeType.BlurImageFilter:
+      {
+        const imgf = (0, _imageFilters.makeBlurImageFilter)(ctx, props);
+        (0, _imageFilters.composeImageFilters)(ctx, imgf, processChildren);
+        break;
+      }
+    case _types.NodeType.OffsetImageFilter:
+      {
+        const imgf = (0, _imageFilters.makeOffsetImageFilter)(ctx, props);
+        (0, _imageFilters.composeImageFilters)(ctx, imgf, processChildren);
+        break;
+      }
+    case _types.NodeType.DisplacementMapImageFilter:
+      {
+        processChildren();
+        (0, _imageFilters.declareDisplacementMapImageFilter)(ctx, props);
+        break;
+      }
+    case _types.NodeType.DropShadowImageFilter:
+      {
+        const imgf = (0, _imageFilters.makeDropShadowImageFilter)(ctx, props);
+        (0, _imageFilters.composeImageFilters)(ctx, imgf, processChildren);
+        break;
+      }
+    case _types.NodeType.MorphologyImageFilter:
+      {
+        const imgf = (0, _imageFilters.makeMorphologyImageFilter)(ctx, props);
+        (0, _imageFilters.composeImageFilters)(ctx, imgf, processChildren);
+        break;
+      }
+    case _types.NodeType.BlendImageFilter:
+      {
+        processChildren();
+        (0, _imageFilters.declareBlendImageFilter)(ctx, props);
+        break;
+      }
+    case _types.NodeType.RuntimeShaderImageFilter:
+      {
+        const imgf = (0, _imageFilters.makeRuntimeShaderImageFilter)(ctx, props);
+        (0, _imageFilters.composeImageFilters)(ctx, imgf, processChildren);
+        break;
+      }
+    // Path Effects
+    case _types.NodeType.SumPathEffect:
+      {
+        processChildren();
+        (0, _pathEffects.declareSumPathEffect)(ctx);
+        break;
+      }
+    case _types.NodeType.CornerPathEffect:
+      {
+        const pf = (0, _pathEffects.makeCornerPathEffect)(ctx, props);
+        (0, _pathEffects.composePathEffects)(ctx, pf, processChildren);
+        break;
+      }
+    case _types.NodeType.Path1DPathEffect:
+      {
+        const pf = (0, _pathEffects.makePath1DPathEffect)(ctx, props);
+        (0, _pathEffects.composePathEffects)(ctx, pf, processChildren);
+        break;
+      }
+    case _types.NodeType.Path2DPathEffect:
+      {
+        const pf = (0, _pathEffects.makePath2DPathEffect)(ctx, props);
+        (0, _pathEffects.composePathEffects)(ctx, pf, processChildren);
+        break;
+      }
+    case _types.NodeType.Line2DPathEffect:
+      {
+        const pf = (0, _pathEffects.makeLine2DPathEffect)(ctx, props);
+        (0, _pathEffects.composePathEffects)(ctx, pf, processChildren);
+        break;
+      }
+    case _types.NodeType.DashPathEffect:
+      {
+        const pf = (0, _pathEffects.makeDashPathEffect)(ctx, props);
+        (0, _pathEffects.composePathEffects)(ctx, pf, processChildren);
+        break;
+      }
+    case _types.NodeType.DiscretePathEffect:
+      {
+        const pf = (0, _pathEffects.makeDiscretePathEffect)(ctx, props);
+        (0, _pathEffects.composePathEffects)(ctx, pf, processChildren);
+        break;
+      }
+    // Paint
+    case _types.NodeType.Paint:
+      processChildren();
+      (0, _paint.declarePaint)(ctx, props);
+      break;
+    default:
+      console.log("Unknown declaration node: ", type);
+  }
+}
+const preProcessContext = (ctx, props, node) => {
+  "worklet";
+
+  const shouldRestoreMatrix = ctx.processMatrixAndClipping(props, props.layer);
+  const declCtx = (0, _DeclarationContext.createDeclarationContext)(ctx.Skia);
+  node.children.forEach(child => {
+    if (child.isDeclaration) {
+      processDeclarations(declCtx, child);
+    }
+  });
+  const shouldRestorePaint = ctx.processPaint(props, declCtx);
+  return {
+    shouldRestoreMatrix,
+    shouldRestorePaint,
+    extraPaints: declCtx.paints.popAll()
+  };
+};
+const drawBackdropFilter = (ctx, node) => {
+  "worklet";
+
+  const {
+    canvas,
+    Skia
+  } = ctx;
+  const child = node.children[0];
+  let imageFilter = null;
+  if (child.isDeclaration) {
+    const declCtx = (0, _DeclarationContext.createDeclarationContext)(ctx.Skia);
+    processDeclarations(declCtx, child);
+    const imgf = declCtx.imageFilters.pop();
+    if (imgf) {
+      imageFilter = imgf;
+    } else {
+      const cf = declCtx.colorFilters.pop();
+      if (cf) {
+        imageFilter = Skia.ImageFilter.MakeColorFilter(cf, null);
+      }
+    }
+  }
+  canvas.saveLayer(undefined, null, imageFilter);
+  canvas.restore();
+};
+function draw(ctx, node) {
+  "worklet";
+
+  // Special mixed nodes
+  if (node.type === _types.NodeType.BackdropFilter) {
+    drawBackdropFilter(ctx, node);
+    return;
+  }
+  if (node.type === _types.NodeType.Layer) {
+    let hasLayer = false;
+    const [layer, ...children] = node.children;
+    if (layer.isDeclaration) {
+      const declCtx = (0, _DeclarationContext.createDeclarationContext)(ctx.Skia);
+      processDeclarations(declCtx, layer);
+      const paint = declCtx.paints.pop();
+      if (paint) {
+        hasLayer = true;
+        ctx.canvas.saveLayer(paint);
+      }
+    }
+    children.map(child => {
+      if (!child.isDeclaration) {
+        draw(ctx, child);
+      }
+    });
+    if (hasLayer) {
+      ctx.canvas.restore();
+    }
+    return;
+  }
+  const {
+    type,
+    props: rawProps,
+    children
+  } = node;
+  // Regular nodes
+  const props = (0, _utils.materialize)(rawProps);
+  const {
+    shouldRestoreMatrix,
+    shouldRestorePaint,
+    extraPaints
+  } = preProcessContext(ctx, props, node);
+  const paints = [ctx.getPaint(), ...extraPaints];
+  paints.forEach(paint => {
+    const lctx = {
+      paint,
+      Skia: ctx.Skia,
+      canvas: ctx.canvas
+    };
+    switch (type) {
+      case _types.NodeType.Box:
+        (0, _drawings.drawBox)(lctx, props, node.children);
+        break;
+      case _types.NodeType.Image:
+        (0, _drawings.drawImage)(lctx, props);
+        break;
+      case _types.NodeType.Points:
+        (0, _drawings.drawPoints)(lctx, props);
+        break;
+      case _types.NodeType.Path:
+        (0, _drawings.drawPath)(lctx, props);
+        break;
+      case _types.NodeType.Rect:
+        (0, _drawings.drawRect)(lctx, props);
+        break;
+      case _types.NodeType.RRect:
+        (0, _drawings.drawRRect)(lctx, props);
+        break;
+      case _types.NodeType.Oval:
+        (0, _drawings.drawOval)(lctx, props);
+        break;
+      case _types.NodeType.Line:
+        (0, _drawings.drawLine)(lctx, props);
+        break;
+      case _types.NodeType.Patch:
+        (0, _drawings.drawPatch)(lctx, props);
+        break;
+      case _types.NodeType.Vertices:
+        (0, _drawings.drawVertices)(lctx, props);
+        break;
+      case _types.NodeType.DiffRect:
+        (0, _drawings.drawDiffRect)(lctx, props);
+        break;
+      case _types.NodeType.Text:
+        (0, _drawings.drawText)(lctx, props);
+        break;
+      case _types.NodeType.TextPath:
+        (0, _drawings.drawTextPath)(lctx, props);
+        break;
+      case _types.NodeType.TextBlob:
+        (0, _drawings.drawTextBlob)(lctx, props);
+        break;
+      case _types.NodeType.Glyphs:
+        (0, _drawings.drawGlyphs)(lctx, props);
+        break;
+      case _types.NodeType.Picture:
+        (0, _drawings.drawPicture)(lctx, props);
+        break;
+      case _types.NodeType.ImageSVG:
+        (0, _drawings.drawImageSVG)(lctx, props);
+        break;
+      case _types.NodeType.Paragraph:
+        (0, _drawings.drawParagraph)(lctx, props);
+        break;
+      case _types.NodeType.Atlas:
+        (0, _drawings.drawAtlas)(lctx, props);
+        break;
+      case _types.NodeType.Circle:
+        (0, _drawings.drawCircle)(lctx, props);
+        break;
+      case _types.NodeType.Fill:
+        (0, _drawings.drawFill)(lctx, props);
+        break;
+      case _types.NodeType.Group:
+        // TODO: do nothing
+        break;
+      default:
+        if (!node.isDeclaration) {
+          console.warn(`Unsupported node type: ${type}`);
+        }
+    }
+  });
+  children.forEach(child => {
+    if (!child.isDeclaration) {
+      draw(ctx, child);
+    }
+  });
+  if (shouldRestoreMatrix) {
+    ctx.canvas.restore();
+  }
+  if (shouldRestorePaint) {
+    ctx.restore();
+  }
+}
+//# sourceMappingURL=context.js.map