@shopify/react-native-skia 0.1.172 → 0.1.174

package/lib/module/views/SkiaBaseWebView.js

@@ -103,9 +103,13 @@ export class SkiaBaseWebView extends React.Component {
 
 
   makeImageSnapshot(rect) {
-    var _this$_surface;
+    var _this$_surface, _this$_surface2;
 
-    return (_this$_surface = this._surface) === null || _this$_surface === void 0 ? void 0 : _this$_surface.makeImageSnapshot(rect);
+    this._canvas.clear(CanvasKit.TRANSPARENT);
+
+    this.renderInCanvas(this._canvas, []);
+    (_this$_surface = this._surface) === null || _this$_surface === void 0 ? void 0 : _this$_surface.ref.flush();
+    return (_this$_surface2 = this._surface) === null || _this$_surface2 === void 0 ? void 0 : _this$_surface2.makeImageSnapshot(rect);
   }
   /**
    * Override to render
@@ -120,15 +124,17 @@ export class SkiaBaseWebView extends React.Component {
       this._redrawRequests = 0;
 
       if (this._canvas) {
-        var _this$_surface2;
+        var _this$_surface3;
 
         const touches = [...this._touches];
         this._touches = [];
-
-        this._canvas.clear(CanvasKit.TRANSPARENT);
-
-        this.renderInCanvas(this._canvas, touches);
-        (_this$_surface2 = this._surface) === null || _this$_surface2 === void 0 ? void 0 : _this$_surface2.ref.flush();
+        const canvas = this._canvas;
+        canvas.clear(Float32Array.of(0, 0, 0, 0));
+        canvas.save();
+        canvas.scale(pd, pd);
+        this.renderInCanvas(canvas, touches);
+        canvas.restore();
+        (_this$_surface3 = this._surface) === null || _this$_surface3 === void 0 ? void 0 : _this$_surface3.ref.flush();
       }
     }
 

package/lib/module/views/SkiaBaseWebView.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","PixelRatio","View","JsiSkSurface","TouchType","pd","get","SkiaBaseWebView","Component","constructor","props","createRef","_mode","mode","unsubscribeAll","_unsubscriptions","forEach","u","onLayout","evt","CanvasKit","global","width","height","nativeEvent","layout","_canvasRef","current","canvas","surface","MakeWebGLCanvasSurface","Error","_surface","_canvas","getCanvas","redraw","getSize","componentDidMount","tick","componentDidUpdate","componentWillUnmount","cancelAnimationFrame","requestId","makeImageSnapshot","rect","_redrawRequests","touches","_touches","clear","TRANSPARENT","renderInCanvas","ref","flush","requestAnimationFrame","bind","setDrawMode","registerValues","_values","v","push","addListener","handleTouchEvent","touchType","id","pointerId","x","clientX","currentTarget","getClientRects","left","y","clientY","top","force","pressure","type","timestamp","Date","now","createTouchHandler","render","debug","viewProps","display","flex","Start","Active","End","Cancelled"],"sources":["SkiaBaseWebView.tsx"],"sourcesContent":["/* global HTMLCanvasElement */\nimport React from \"react\";\nimport type { PointerEvent } from \"react\";\nimport type { LayoutChangeEvent } from \"react-native\";\nimport { PixelRatio, View } from \"react-native\";\n\nimport type { SkRect, SkCanvas } from \"../skia/types\";\nimport type { SkiaValue } from \"../values\";\nimport { JsiSkSurface } from \"../skia/web/JsiSkSurface\";\n\nimport type { DrawMode, SkiaBaseViewProps, TouchInfo } from \"./types\";\nimport { TouchType } from \"./types\";\n\nconst pd = PixelRatio.get();\n\nexport abstract class SkiaBaseWebView<\n  TProps extends SkiaBaseViewProps\n> extends React.Component<TProps> {\n  constructor(props: TProps) {\n    super(props);\n    this._mode = props.mode ?? \"default\";\n  }\n\n  private _surface: JsiSkSurface | null = null;\n  private _unsubscriptions: Array<() => void> = [];\n  private _touches: Array<TouchInfo> = [];\n  private _canvas: SkCanvas | null = null;\n  private _canvasRef = React.createRef<HTMLCanvasElement>();\n  private _mode: DrawMode;\n  private _redrawRequests = 0;\n  private requestId = 0;\n\n  protected width = 0;\n  protected height = 0;\n\n  private unsubscribeAll() {\n    this._unsubscriptions.forEach((u) => u());\n    this._unsubscriptions = [];\n  }\n\n  private onLayout(evt: LayoutChangeEvent) {\n    const { CanvasKit } = global;\n    const { width, height } = evt.nativeEvent.layout;\n    this.width = width;\n    this.height = height;\n    // Reset canvas / surface on layout change\n    if (this._canvasRef.current) {\n      const canvas = this._canvasRef.current;\n      canvas.width = width * pd;\n      canvas.height = height * pd;\n      const surface = CanvasKit.MakeWebGLCanvasSurface(this._canvasRef.current);\n      if (!surface) {\n        throw new Error(\"Could not create surface\");\n      }\n      this._surface = new JsiSkSurface(CanvasKit, surface);\n      this._canvas = this._surface.getCanvas();\n      this.redraw();\n    }\n    // Call onLayout callback if it exists\n    if (this.props.onLayout) {\n      this.props.onLayout(evt);\n    }\n  }\n\n  protected getSize() {\n    return { width: this.width, height: this.height };\n  }\n\n  componentDidMount() {\n    // Start render loop\n    this.tick();\n  }\n\n  componentDidUpdate() {\n    this.redraw();\n  }\n\n  componentWillUnmount() {\n    this.unsubscribeAll();\n    cancelAnimationFrame(this.requestId);\n  }\n\n  /**\n   * Creates a snapshot from the canvas in the surface\n   * @param rect Rect to use as bounds. Optional.\n   * @returns An Image object.\n   */\n  public makeImageSnapshot(rect?: SkRect) {\n    return this._surface?.makeImageSnapshot(rect);\n  }\n\n  /**\n   * Override to render\n   */\n  protected abstract renderInCanvas(\n    canvas: SkCanvas,\n    touches: TouchInfo[]\n  ): void;\n\n  /**\n   * Sends a redraw request to the native SkiaView.\n   */\n  private tick() {\n    if (this._mode === \"continuous\" || this._redrawRequests > 0) {\n      this._redrawRequests = 0;\n      if (this._canvas) {\n        const touches = [...this._touches];\n        this._touches = [];\n        this._canvas!.clear(CanvasKit.TRANSPARENT);\n        this.renderInCanvas(this._canvas!, touches);\n        this._surface?.ref.flush();\n      }\n    }\n    this.requestId = requestAnimationFrame(this.tick.bind(this));\n  }\n\n  public redraw() {\n    this._redrawRequests++;\n  }\n\n  /**\n   * Updates the drawing mode for the skia view. This is the same\n   * as declaratively setting the mode property on the SkiaView.\n   * There are two drawing modes, \"continuous\" and \"default\",\n   * where the continuous mode will continuously redraw the view and\n   * the default mode will only redraw when any of the regular react\n   * properties are changed like size and margins.\n   * @param mode Drawing mode to use.\n   */\n  public setDrawMode(mode: DrawMode) {\n    this._mode = mode;\n    this.tick();\n  }\n\n  /**\n   * Registers one or move values as a dependant value of the Skia View. The view will\n   * The view will redraw itself when any of the values change.\n   * @param values Values to register\n   */\n  public registerValues(_values: SkiaValue<unknown>[]) {\n    // Unsubscribe from dependency values\n    this.unsubscribeAll();\n    // Register redraw dependencies on values\n    _values.forEach((v) => {\n      this._unsubscriptions.push(\n        v.addListener(() => {\n          this.redraw();\n        })\n      );\n    });\n  }\n\n  private handleTouchEvent(evt: PointerEvent, touchType: TouchType) {\n    this._touches.push({\n      id: evt.pointerId,\n      x: evt.clientX - evt.currentTarget.getClientRects()[0].left,\n      y: evt.clientY - evt.currentTarget.getClientRects()[0].top,\n      force: evt.pressure,\n      type: touchType,\n      timestamp: Date.now(),\n    });\n    this.redraw();\n  }\n\n  createTouchHandler(touchType: TouchType) {\n    return (evt: PointerEvent) => this.handleTouchEvent(evt, touchType);\n  }\n\n  render() {\n    const { mode, debug = false, ...viewProps } = this.props;\n    return (\n      <View {...viewProps} onLayout={this.onLayout.bind(this)}>\n        <canvas\n          ref={this._canvasRef}\n          style={{ display: \"flex\", flex: 1 }}\n          onPointerDown={this.createTouchHandler(TouchType.Start)}\n          onPointerMove={this.createTouchHandler(TouchType.Active)}\n          onPointerUp={this.createTouchHandler(TouchType.End)}\n          onPointerCancel={this.createTouchHandler(TouchType.Cancelled)}\n          onPointerLeave={this.createTouchHandler(TouchType.End)}\n          onPointerOut={this.createTouchHandler(TouchType.End)}\n        />\n      </View>\n    );\n  }\n}\n"],"mappings":"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"}
+{"version":3,"names":["React","PixelRatio","View","JsiSkSurface","TouchType","pd","get","SkiaBaseWebView","Component","constructor","props","createRef","_mode","mode","unsubscribeAll","_unsubscriptions","forEach","u","onLayout","evt","CanvasKit","global","width","height","nativeEvent","layout","_canvasRef","current","canvas","surface","MakeWebGLCanvasSurface","Error","_surface","_canvas","getCanvas","redraw","getSize","componentDidMount","tick","componentDidUpdate","componentWillUnmount","cancelAnimationFrame","requestId","makeImageSnapshot","rect","clear","TRANSPARENT","renderInCanvas","ref","flush","_redrawRequests","touches","_touches","Float32Array","of","save","scale","restore","requestAnimationFrame","bind","setDrawMode","registerValues","_values","v","push","addListener","handleTouchEvent","touchType","id","pointerId","x","clientX","currentTarget","getClientRects","left","y","clientY","top","force","pressure","type","timestamp","Date","now","createTouchHandler","render","debug","viewProps","display","flex","Start","Active","End","Cancelled"],"sources":["SkiaBaseWebView.tsx"],"sourcesContent":["/* global HTMLCanvasElement */\nimport React from \"react\";\nimport type { PointerEvent } from \"react\";\nimport type { LayoutChangeEvent } from \"react-native\";\nimport { PixelRatio, View } from \"react-native\";\n\nimport type { SkRect, SkCanvas } from \"../skia/types\";\nimport type { SkiaValue } from \"../values\";\nimport { JsiSkSurface } from \"../skia/web/JsiSkSurface\";\n\nimport type { DrawMode, SkiaBaseViewProps, TouchInfo } from \"./types\";\nimport { TouchType } from \"./types\";\n\nconst pd = PixelRatio.get();\n\nexport abstract class SkiaBaseWebView<\n  TProps extends SkiaBaseViewProps\n> extends React.Component<TProps> {\n  constructor(props: TProps) {\n    super(props);\n    this._mode = props.mode ?? \"default\";\n  }\n\n  private _surface: JsiSkSurface | null = null;\n  private _unsubscriptions: Array<() => void> = [];\n  private _touches: Array<TouchInfo> = [];\n  private _canvas: SkCanvas | null = null;\n  private _canvasRef = React.createRef<HTMLCanvasElement>();\n  private _mode: DrawMode;\n  private _redrawRequests = 0;\n  private requestId = 0;\n\n  protected width = 0;\n  protected height = 0;\n\n  private unsubscribeAll() {\n    this._unsubscriptions.forEach((u) => u());\n    this._unsubscriptions = [];\n  }\n\n  private onLayout(evt: LayoutChangeEvent) {\n    const { CanvasKit } = global;\n    const { width, height } = evt.nativeEvent.layout;\n    this.width = width;\n    this.height = height;\n    // Reset canvas / surface on layout change\n    if (this._canvasRef.current) {\n      const canvas = this._canvasRef.current;\n      canvas.width = width * pd;\n      canvas.height = height * pd;\n      const surface = CanvasKit.MakeWebGLCanvasSurface(this._canvasRef.current);\n      if (!surface) {\n        throw new Error(\"Could not create surface\");\n      }\n      this._surface = new JsiSkSurface(CanvasKit, surface);\n      this._canvas = this._surface.getCanvas();\n      this.redraw();\n    }\n    // Call onLayout callback if it exists\n    if (this.props.onLayout) {\n      this.props.onLayout(evt);\n    }\n  }\n\n  protected getSize() {\n    return { width: this.width, height: this.height };\n  }\n\n  componentDidMount() {\n    // Start render loop\n    this.tick();\n  }\n\n  componentDidUpdate() {\n    this.redraw();\n  }\n\n  componentWillUnmount() {\n    this.unsubscribeAll();\n    cancelAnimationFrame(this.requestId);\n  }\n\n  /**\n   * Creates a snapshot from the canvas in the surface\n   * @param rect Rect to use as bounds. Optional.\n   * @returns An Image object.\n   */\n  public makeImageSnapshot(rect?: SkRect) {\n    this._canvas!.clear(CanvasKit.TRANSPARENT);\n    this.renderInCanvas(this._canvas!, []);\n    this._surface?.ref.flush();\n    return this._surface?.makeImageSnapshot(rect);\n  }\n\n  /**\n   * Override to render\n   */\n  protected abstract renderInCanvas(\n    canvas: SkCanvas,\n    touches: TouchInfo[]\n  ): void;\n\n  /**\n   * Sends a redraw request to the native SkiaView.\n   */\n  private tick() {\n    if (this._mode === \"continuous\" || this._redrawRequests > 0) {\n      this._redrawRequests = 0;\n      if (this._canvas) {\n        const touches = [...this._touches];\n        this._touches = [];\n        const canvas = this._canvas!;\n        canvas.clear(Float32Array.of(0, 0, 0, 0));\n        canvas.save();\n        canvas.scale(pd, pd);\n        this.renderInCanvas(canvas, touches);\n        canvas.restore();\n        this._surface?.ref.flush();\n      }\n    }\n    this.requestId = requestAnimationFrame(this.tick.bind(this));\n  }\n\n  public redraw() {\n    this._redrawRequests++;\n  }\n\n  /**\n   * Updates the drawing mode for the skia view. This is the same\n   * as declaratively setting the mode property on the SkiaView.\n   * There are two drawing modes, \"continuous\" and \"default\",\n   * where the continuous mode will continuously redraw the view and\n   * the default mode will only redraw when any of the regular react\n   * properties are changed like size and margins.\n   * @param mode Drawing mode to use.\n   */\n  public setDrawMode(mode: DrawMode) {\n    this._mode = mode;\n    this.tick();\n  }\n\n  /**\n   * Registers one or move values as a dependant value of the Skia View. The view will\n   * The view will redraw itself when any of the values change.\n   * @param values Values to register\n   */\n  public registerValues(_values: SkiaValue<unknown>[]) {\n    // Unsubscribe from dependency values\n    this.unsubscribeAll();\n    // Register redraw dependencies on values\n    _values.forEach((v) => {\n      this._unsubscriptions.push(\n        v.addListener(() => {\n          this.redraw();\n        })\n      );\n    });\n  }\n\n  private handleTouchEvent(evt: PointerEvent, touchType: TouchType) {\n    this._touches.push({\n      id: evt.pointerId,\n      x: evt.clientX - evt.currentTarget.getClientRects()[0].left,\n      y: evt.clientY - evt.currentTarget.getClientRects()[0].top,\n      force: evt.pressure,\n      type: touchType,\n      timestamp: Date.now(),\n    });\n    this.redraw();\n  }\n\n  createTouchHandler(touchType: TouchType) {\n    return (evt: PointerEvent) => this.handleTouchEvent(evt, touchType);\n  }\n\n  render() {\n    const { mode, debug = false, ...viewProps } = this.props;\n    return (\n      <View {...viewProps} onLayout={this.onLayout.bind(this)}>\n        <canvas\n          ref={this._canvasRef}\n          style={{ display: \"flex\", flex: 1 }}\n          onPointerDown={this.createTouchHandler(TouchType.Start)}\n          onPointerMove={this.createTouchHandler(TouchType.Active)}\n          onPointerUp={this.createTouchHandler(TouchType.End)}\n          onPointerCancel={this.createTouchHandler(TouchType.Cancelled)}\n          onPointerLeave={this.createTouchHandler(TouchType.End)}\n          onPointerOut={this.createTouchHandler(TouchType.End)}\n        />\n      </View>\n    );\n  }\n}\n"],"mappings":"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"}

package/lib/module/views/SkiaDomView.web.js

@@ -1,7 +1,6 @@
-import { PixelRatio } from "react-native";
 import { Skia } from "../skia";
+import { JsiDrawingContext } from "../dom/types/DrawingContext";
 import { SkiaBaseWebView } from "./SkiaBaseWebView";
-const pd = PixelRatio.get();
 export class SkiaDomView extends SkiaBaseWebView {
   constructor(props) {
     super(props);
@@ -24,16 +23,8 @@ export class SkiaDomView extends SkiaBaseWebView {
     }
 
     if (this.props.root) {
-      const paint = Skia.Paint();
-      const ctx = {
-        canvas,
-        paint,
-        opacity: 1
-      };
-      canvas.save();
-      canvas.scale(pd, pd);
+      const ctx = new JsiDrawingContext(Skia, canvas);
       this.props.root.render(ctx);
-      canvas.restore();
     }
   }
 

package/lib/module/views/SkiaDomView.web.js.map

@@ -1 +1 @@
-{"version":3,"names":["PixelRatio","Skia","SkiaBaseWebView","pd","get","SkiaDomView","constructor","props","renderInCanvas","canvas","touches","onTouch","onSize","width","height","getSize","current","root","paint","Paint","ctx","opacity","save","scale","render","restore"],"sources":["SkiaDomView.web.tsx"],"sourcesContent":["import { PixelRatio } from \"react-native\";\n\nimport { Skia } from \"../skia\";\nimport type { SkCanvas } from \"../skia/types\";\n\nimport { SkiaBaseWebView } from \"./SkiaBaseWebView\";\nimport type { SkiaDomViewProps, TouchInfo } from \"./types\";\n\nconst pd = PixelRatio.get();\n\nexport class SkiaDomView extends SkiaBaseWebView<SkiaDomViewProps> {\n  constructor(props: SkiaDomViewProps) {\n    super(props);\n  }\n\n  protected renderInCanvas(canvas: SkCanvas, touches: TouchInfo[]): void {\n    if (this.props.onTouch) {\n      this.props.onTouch([touches]);\n    }\n    if (this.props.onSize) {\n      const { width, height } = this.getSize();\n      this.props.onSize.current = { width, height };\n    }\n    if (this.props.root) {\n      const paint = Skia.Paint();\n      const ctx = {\n        canvas,\n        paint,\n        opacity: 1,\n      };\n      canvas.save();\n      canvas.scale(pd, pd);\n      this.props.root.render(ctx);\n      canvas.restore();\n    }\n  }\n}\n"],"mappings":"AAAA,SAASA,UAAT,QAA2B,cAA3B;AAEA,SAASC,IAAT,QAAqB,SAArB;AAGA,SAASC,eAAT,QAAgC,mBAAhC;AAGA,MAAMC,EAAE,GAAGH,UAAU,CAACI,GAAX,EAAX;AAEA,OAAO,MAAMC,WAAN,SAA0BH,eAA1B,CAA4D;EACjEI,WAAW,CAACC,KAAD,EAA0B;IACnC,MAAMA,KAAN;EACD;;EAESC,cAAc,CAACC,MAAD,EAAmBC,OAAnB,EAA+C;IACrE,IAAI,KAAKH,KAAL,CAAWI,OAAf,EAAwB;MACtB,KAAKJ,KAAL,CAAWI,OAAX,CAAmB,CAACD,OAAD,CAAnB;IACD;;IACD,IAAI,KAAKH,KAAL,CAAWK,MAAf,EAAuB;MACrB,MAAM;QAAEC,KAAF;QAASC;MAAT,IAAoB,KAAKC,OAAL,EAA1B;MACA,KAAKR,KAAL,CAAWK,MAAX,CAAkBI,OAAlB,GAA4B;QAAEH,KAAF;QAASC;MAAT,CAA5B;IACD;;IACD,IAAI,KAAKP,KAAL,CAAWU,IAAf,EAAqB;MACnB,MAAMC,KAAK,GAAGjB,IAAI,CAACkB,KAAL,EAAd;MACA,MAAMC,GAAG,GAAG;QACVX,MADU;QAEVS,KAFU;QAGVG,OAAO,EAAE;MAHC,CAAZ;MAKAZ,MAAM,CAACa,IAAP;MACAb,MAAM,CAACc,KAAP,CAAapB,EAAb,EAAiBA,EAAjB;MACA,KAAKI,KAAL,CAAWU,IAAX,CAAgBO,MAAhB,CAAuBJ,GAAvB;MACAX,MAAM,CAACgB,OAAP;IACD;EACF;;AAzBgE"}
+{"version":3,"names":["Skia","JsiDrawingContext","SkiaBaseWebView","SkiaDomView","constructor","props","renderInCanvas","canvas","touches","onTouch","onSize","width","height","getSize","current","root","ctx","render"],"sources":["SkiaDomView.web.tsx"],"sourcesContent":["import { Skia } from \"../skia\";\nimport type { SkCanvas } from \"../skia/types\";\nimport { JsiDrawingContext } from \"../dom/types/DrawingContext\";\n\nimport { SkiaBaseWebView } from \"./SkiaBaseWebView\";\nimport type { SkiaDomViewProps, TouchInfo } from \"./types\";\n\nexport class SkiaDomView extends SkiaBaseWebView<SkiaDomViewProps> {\n  constructor(props: SkiaDomViewProps) {\n    super(props);\n  }\n\n  protected renderInCanvas(canvas: SkCanvas, touches: TouchInfo[]): void {\n    if (this.props.onTouch) {\n      this.props.onTouch([touches]);\n    }\n    if (this.props.onSize) {\n      const { width, height } = this.getSize();\n      this.props.onSize.current = { width, height };\n    }\n    if (this.props.root) {\n      const ctx = new JsiDrawingContext(Skia, canvas);\n      this.props.root.render(ctx);\n    }\n  }\n}\n"],"mappings":"AAAA,SAASA,IAAT,QAAqB,SAArB;AAEA,SAASC,iBAAT,QAAkC,6BAAlC;AAEA,SAASC,eAAT,QAAgC,mBAAhC;AAGA,OAAO,MAAMC,WAAN,SAA0BD,eAA1B,CAA4D;EACjEE,WAAW,CAACC,KAAD,EAA0B;IACnC,MAAMA,KAAN;EACD;;EAESC,cAAc,CAACC,MAAD,EAAmBC,OAAnB,EAA+C;IACrE,IAAI,KAAKH,KAAL,CAAWI,OAAf,EAAwB;MACtB,KAAKJ,KAAL,CAAWI,OAAX,CAAmB,CAACD,OAAD,CAAnB;IACD;;IACD,IAAI,KAAKH,KAAL,CAAWK,MAAf,EAAuB;MACrB,MAAM;QAAEC,KAAF;QAASC;MAAT,IAAoB,KAAKC,OAAL,EAA1B;MACA,KAAKR,KAAL,CAAWK,MAAX,CAAkBI,OAAlB,GAA4B;QAAEH,KAAF;QAASC;MAAT,CAA5B;IACD;;IACD,IAAI,KAAKP,KAAL,CAAWU,IAAf,EAAqB;MACnB,MAAMC,GAAG,GAAG,IAAIf,iBAAJ,CAAsBD,IAAtB,EAA4BO,MAA5B,CAAZ;MACA,KAAKF,KAAL,CAAWU,IAAX,CAAgBE,MAAhB,CAAuBD,GAAvB;IACD;EACF;;AAjBgE"}

package/lib/module/views/SkiaPictureView.web.js

@@ -1,6 +1,4 @@
-import { PixelRatio } from "react-native";
 import { SkiaBaseWebView } from "./SkiaBaseWebView";
-const pd = PixelRatio.get();
 export class SkiaPictureView extends SkiaBaseWebView {
   constructor(props) {
     super(props);
@@ -8,10 +6,7 @@ export class SkiaPictureView extends SkiaBaseWebView {
 
   renderInCanvas(canvas) {
     if (this.props.picture) {
-      canvas.save();
-      canvas.scale(pd, pd);
       canvas.drawPicture(this.props.picture);
-      canvas.restore();
     }
   }
 

package/lib/module/views/SkiaPictureView.web.js.map

@@ -1 +1 @@
-{"version":3,"names":["PixelRatio","SkiaBaseWebView","pd","get","SkiaPictureView","constructor","props","renderInCanvas","canvas","picture","save","scale","drawPicture","restore"],"sources":["SkiaPictureView.web.tsx"],"sourcesContent":["import { PixelRatio } from \"react-native\";\n\nimport type { SkCanvas } from \"../skia/types\";\n\nimport type { SkiaPictureViewProps } from \"./types\";\nimport { SkiaBaseWebView } from \"./SkiaBaseWebView\";\n\nconst pd = PixelRatio.get();\n\nexport class SkiaPictureView extends SkiaBaseWebView<SkiaPictureViewProps> {\n  constructor(props: SkiaPictureViewProps) {\n    super(props);\n  }\n\n  protected renderInCanvas(canvas: SkCanvas): void {\n    if (this.props.picture) {\n      canvas.save();\n      canvas.scale(pd, pd);\n      canvas.drawPicture(this.props.picture);\n      canvas.restore();\n    }\n  }\n}\n"],"mappings":"AAAA,SAASA,UAAT,QAA2B,cAA3B;AAKA,SAASC,eAAT,QAAgC,mBAAhC;AAEA,MAAMC,EAAE,GAAGF,UAAU,CAACG,GAAX,EAAX;AAEA,OAAO,MAAMC,eAAN,SAA8BH,eAA9B,CAAoE;EACzEI,WAAW,CAACC,KAAD,EAA8B;IACvC,MAAMA,KAAN;EACD;;EAESC,cAAc,CAACC,MAAD,EAAyB;IAC/C,IAAI,KAAKF,KAAL,CAAWG,OAAf,EAAwB;MACtBD,MAAM,CAACE,IAAP;MACAF,MAAM,CAACG,KAAP,CAAaT,EAAb,EAAiBA,EAAjB;MACAM,MAAM,CAACI,WAAP,CAAmB,KAAKN,KAAL,CAAWG,OAA9B;MACAD,MAAM,CAACK,OAAP;IACD;EACF;;AAZwE"}
+{"version":3,"names":["SkiaBaseWebView","SkiaPictureView","constructor","props","renderInCanvas","canvas","picture","drawPicture"],"sources":["SkiaPictureView.web.tsx"],"sourcesContent":["import type { SkCanvas } from \"../skia/types\";\n\nimport type { SkiaPictureViewProps } from \"./types\";\nimport { SkiaBaseWebView } from \"./SkiaBaseWebView\";\n\nexport class SkiaPictureView extends SkiaBaseWebView<SkiaPictureViewProps> {\n  constructor(props: SkiaPictureViewProps) {\n    super(props);\n  }\n\n  protected renderInCanvas(canvas: SkCanvas): void {\n    if (this.props.picture) {\n      canvas.drawPicture(this.props.picture);\n    }\n  }\n}\n"],"mappings":"AAGA,SAASA,eAAT,QAAgC,mBAAhC;AAEA,OAAO,MAAMC,eAAN,SAA8BD,eAA9B,CAAoE;EACzEE,WAAW,CAACC,KAAD,EAA8B;IACvC,MAAMA,KAAN;EACD;;EAESC,cAAc,CAACC,MAAD,EAAyB;IAC/C,IAAI,KAAKF,KAAL,CAAWG,OAAf,EAAwB;MACtBD,MAAM,CAACE,WAAP,CAAmB,KAAKJ,KAAL,CAAWG,OAA9B;IACD;EACF;;AATwE"}

package/lib/module/views/SkiaView.web.js

@@ -1,6 +1,4 @@
-import { PixelRatio } from "react-native";
 import { SkiaBaseWebView } from "./SkiaBaseWebView";
-const pd = PixelRatio.get();
 export class SkiaView extends SkiaBaseWebView {
   constructor(props) {
     super(props);
@@ -14,10 +12,7 @@ export class SkiaView extends SkiaBaseWebView {
         timestamp: Date.now(),
         touches: touches.map(t => [t])
       };
-      canvas.save();
-      canvas.scale(pd, pd);
       this.props.onDraw(canvas, info);
-      canvas.restore();
     }
   }
 

package/lib/module/views/SkiaView.web.js.map

@@ -1 +1 @@
-{"version":3,"names":["PixelRatio","SkiaBaseWebView","pd","get","SkiaView","constructor","props","renderInCanvas","canvas","touches","onDraw","info","height","width","timestamp","Date","now","map","t","save","scale","restore"],"sources":["SkiaView.web.tsx"],"sourcesContent":["import { PixelRatio } from \"react-native\";\n\nimport type { SkCanvas } from \"../skia/types\";\n\nimport type { DrawingInfo, SkiaDrawViewProps, TouchInfo } from \"./types\";\nimport { SkiaBaseWebView } from \"./SkiaBaseWebView\";\n\nconst pd = PixelRatio.get();\n\nexport class SkiaView extends SkiaBaseWebView<SkiaDrawViewProps> {\n  constructor(props: SkiaDrawViewProps) {\n    super(props);\n  }\n\n  protected renderInCanvas(canvas: SkCanvas, touches: TouchInfo[]): void {\n    if (this.props.onDraw) {\n      const info: DrawingInfo = {\n        height: this.height,\n        width: this.width,\n        timestamp: Date.now(),\n        touches: touches.map((t) => [t]),\n      };\n      canvas.save();\n      canvas.scale(pd, pd);\n      this.props.onDraw(canvas, info);\n      canvas.restore();\n    }\n  }\n}\n"],"mappings":"AAAA,SAASA,UAAT,QAA2B,cAA3B;AAKA,SAASC,eAAT,QAAgC,mBAAhC;AAEA,MAAMC,EAAE,GAAGF,UAAU,CAACG,GAAX,EAAX;AAEA,OAAO,MAAMC,QAAN,SAAuBH,eAAvB,CAA0D;EAC/DI,WAAW,CAACC,KAAD,EAA2B;IACpC,MAAMA,KAAN;EACD;;EAESC,cAAc,CAACC,MAAD,EAAmBC,OAAnB,EAA+C;IACrE,IAAI,KAAKH,KAAL,CAAWI,MAAf,EAAuB;MACrB,MAAMC,IAAiB,GAAG;QACxBC,MAAM,EAAE,KAAKA,MADW;QAExBC,KAAK,EAAE,KAAKA,KAFY;QAGxBC,SAAS,EAAEC,IAAI,CAACC,GAAL,EAHa;QAIxBP,OAAO,EAAEA,OAAO,CAACQ,GAAR,CAAaC,CAAD,IAAO,CAACA,CAAD,CAAnB;MAJe,CAA1B;MAMAV,MAAM,CAACW,IAAP;MACAX,MAAM,CAACY,KAAP,CAAalB,EAAb,EAAiBA,EAAjB;MACA,KAAKI,KAAL,CAAWI,MAAX,CAAkBF,MAAlB,EAA0BG,IAA1B;MACAH,MAAM,CAACa,OAAP;IACD;EACF;;AAlB8D"}
+{"version":3,"names":["SkiaBaseWebView","SkiaView","constructor","props","renderInCanvas","canvas","touches","onDraw","info","height","width","timestamp","Date","now","map","t"],"sources":["SkiaView.web.tsx"],"sourcesContent":["import type { SkCanvas } from \"../skia/types\";\n\nimport type { DrawingInfo, SkiaDrawViewProps, TouchInfo } from \"./types\";\nimport { SkiaBaseWebView } from \"./SkiaBaseWebView\";\n\nexport class SkiaView extends SkiaBaseWebView<SkiaDrawViewProps> {\n  constructor(props: SkiaDrawViewProps) {\n    super(props);\n  }\n\n  protected renderInCanvas(canvas: SkCanvas, touches: TouchInfo[]): void {\n    if (this.props.onDraw) {\n      const info: DrawingInfo = {\n        height: this.height,\n        width: this.width,\n        timestamp: Date.now(),\n        touches: touches.map((t) => [t]),\n      };\n      this.props.onDraw(canvas, info);\n    }\n  }\n}\n"],"mappings":"AAGA,SAASA,eAAT,QAAgC,mBAAhC;AAEA,OAAO,MAAMC,QAAN,SAAuBD,eAAvB,CAA0D;EAC/DE,WAAW,CAACC,KAAD,EAA2B;IACpC,MAAMA,KAAN;EACD;;EAESC,cAAc,CAACC,MAAD,EAAmBC,OAAnB,EAA+C;IACrE,IAAI,KAAKH,KAAL,CAAWI,MAAf,EAAuB;MACrB,MAAMC,IAAiB,GAAG;QACxBC,MAAM,EAAE,KAAKA,MADW;QAExBC,KAAK,EAAE,KAAKA,KAFY;QAGxBC,SAAS,EAAEC,IAAI,CAACC,GAAL,EAHa;QAIxBP,OAAO,EAAEA,OAAO,CAACQ,GAAR,CAAaC,CAAD,IAAO,CAACA,CAAD,CAAnB;MAJe,CAA1B;MAMA,KAAKZ,KAAL,CAAWI,MAAX,CAAkBF,MAAlB,EAA0BG,IAA1B;IACD;EACF;;AAf8D"}

package/lib/typescript/src/dom/nodes/JsiSkDOM.d.ts

@@ -1,14 +1,13 @@
 import type { PathProps, SkDOM, GroupProps, ImageProps, BlurImageFilterProps, MatrixColorFilterProps, CircleProps, BlurMaskFilterProps, LinearGradientProps, PaintProps, ShaderProps, ImageShaderProps, CustomDrawingNodeProps, LineProps, OvalProps, PatchProps, PointsProps, RectProps, RoundedRectProps, VerticesProps, TextProps, DiffRectProps, OffsetImageFilterProps, BlendColorFilterProps, TextPathProps, TextBlobProps, GlyphsProps, TwoPointConicalGradientProps, TurbulenceProps, SweepGradientProps, RadialGradientProps, FractalNoiseProps, ColorProps, PictureProps, ImageSVGProps, LerpColorFilterProps, DrawingNodeProps, BoxProps, BoxShadowProps, ChildrenProps } from "../types";
 import type { BlendImageFilterProps, BlendProps, DisplacementMapImageFilterProps, DropShadowImageFilterProps, MorphologyImageFilterProps, RuntimeShaderImageFilterProps } from "../types/ImageFilters";
 import type { CornerPathEffectProps, DashPathEffectProps, DiscretePathEffectProps, Line2DPathEffectProps, Path1DPathEffectProps, Path2DPathEffectProps } from "../types/PathEffects";
-import { CornerPathEffectNode, Path1DPathEffectNode, Path2DPathEffectNode, Line2DPathEffectNode, BlendNode } from "./paint";
 import type { NodeContext } from "./Node";
 export declare class JsiSkDOM implements SkDOM {
     private ctx;
     constructor(ctx: NodeContext);
     Layer(props?: ChildrenProps): import("../types").RenderNode<ChildrenProps>;
     Group(props?: GroupProps): import("../types").RenderNode<GroupProps>;
-    Paint(props: PaintProps): import("../types").DeclarationNode<PaintProps, import("../..").SkPaint, never>;
+    Paint(props: PaintProps): import("../types").DeclarationNode<PaintProps>;
     Fill(props?: DrawingNodeProps): import("../types").RenderNode<PaintProps>;
     Image(props: ImageProps): import("../types").RenderNode<ImageProps>;
     Circle(props: CircleProps): import("../types").RenderNode<CircleProps>;
@@ -28,38 +27,38 @@ export declare class JsiSkDOM implements SkDOM {
     DiffRect(props: DiffRectProps): import("../types").RenderNode<DiffRectProps>;
     Picture(props: PictureProps): import("../types").RenderNode<PictureProps>;
     ImageSVG(props: ImageSVGProps): import("../types").RenderNode<ImageSVGProps>;
-    BlurMaskFilter(props: BlurMaskFilterProps): import("../types").DeclarationNode<BlurMaskFilterProps, import("../..").SkMaskFilter, never>;
-    BlendImageFilter(props: BlendImageFilterProps): import("../types").DeclarationNode<BlendImageFilterProps, import("../..").SkImageFilter, never>;
-    DropShadowImageFilter(props: DropShadowImageFilterProps): import("../types").DeclarationNode<DropShadowImageFilterProps, import("../..").SkImageFilter, never>;
-    DisplacementMapImageFilter(props: DisplacementMapImageFilterProps): import("../types").DeclarationNode<DisplacementMapImageFilterProps, import("../..").SkImageFilter, never>;
-    BlurImageFilter(props: BlurImageFilterProps): import("../types").DeclarationNode<BlurImageFilterProps, import("../..").SkImageFilter, never>;
-    OffsetImageFilter(props: OffsetImageFilterProps): import("../types").DeclarationNode<OffsetImageFilterProps, import("../..").SkImageFilter, never>;
-    MorphologyImageFilter(props: MorphologyImageFilterProps): import("../types").DeclarationNode<MorphologyImageFilterProps, import("../..").SkImageFilter, never>;
-    RuntimeShaderImageFilter(props: RuntimeShaderImageFilterProps): import("../types").DeclarationNode<RuntimeShaderImageFilterProps, import("../..").SkImageFilter, never>;
-    MatrixColorFilter(props: MatrixColorFilterProps): import("../types").DeclarationNode<MatrixColorFilterProps, import("../..").SkColorFilter, never>;
-    BlendColorFilter(props: BlendColorFilterProps): import("../types").DeclarationNode<BlendColorFilterProps, import("../..").SkColorFilter, never>;
-    LumaColorFilter(): import("../types").DeclarationNode<null, import("../..").SkColorFilter, never>;
-    LinearToSRGBGammaColorFilter(): import("../types").DeclarationNode<null, import("../..").SkColorFilter, never>;
-    SRGBToLinearGammaColorFilter(): import("../types").DeclarationNode<null, import("../..").SkColorFilter, never>;
-    LerpColorFilter(props: LerpColorFilterProps): import("../types").DeclarationNode<LerpColorFilterProps, import("../..").SkColorFilter, never>;
-    Shader(props: ShaderProps): import("../types").DeclarationNode<ShaderProps, import("../..").SkShader, never>;
-    ImageShader(props: ImageShaderProps): import("../types").DeclarationNode<ImageShaderProps, import("../..").SkShader, never>;
-    ColorShader(props: ColorProps): import("../types").DeclarationNode<ColorProps, import("../..").SkShader, never>;
-    SweepGradient(props: SweepGradientProps): import("../types").DeclarationNode<SweepGradientProps, import("../..").SkShader, never>;
-    Turbulence(props: TurbulenceProps): import("../types").DeclarationNode<TurbulenceProps, import("../..").SkShader, never>;
-    FractalNoise(props: FractalNoiseProps): import("../types").DeclarationNode<FractalNoiseProps, import("../..").SkShader, never>;
-    LinearGradient(props: LinearGradientProps): import("../types").DeclarationNode<LinearGradientProps, import("../..").SkShader, never>;
-    RadialGradient(props: RadialGradientProps): import("../types").DeclarationNode<RadialGradientProps, import("../..").SkShader, never>;
-    TwoPointConicalGradient(props: TwoPointConicalGradientProps): import("../types").DeclarationNode<TwoPointConicalGradientProps, import("../..").SkShader, never>;
-    CornerPathEffect(props: CornerPathEffectProps): CornerPathEffectNode | import("../types").DeclarationNode<CornerPathEffectProps, import("../..").SkPathEffect, never>;
-    DiscretePathEffect(props: DiscretePathEffectProps): import("../types").DeclarationNode<DiscretePathEffectProps, import("../..").SkPathEffect, never>;
-    DashPathEffect(props: DashPathEffectProps): import("../types").DeclarationNode<DashPathEffectProps, import("../..").SkPathEffect, never>;
-    Path1DPathEffect(props: Path1DPathEffectProps): Path1DPathEffectNode | import("../types").DeclarationNode<Path1DPathEffectProps, import("../..").SkPathEffect, never>;
-    Path2DPathEffect(props: Path2DPathEffectProps): Path2DPathEffectNode | import("../types").DeclarationNode<Path2DPathEffectProps, import("../..").SkPathEffect, never>;
-    SumPathEffect(): import("../types").DeclarationNode<null, import("../..").SkPathEffect, never>;
-    Line2DPathEffect(props: Line2DPathEffectProps): Line2DPathEffectNode | import("../types").DeclarationNode<Line2DPathEffectProps, import("../..").SkPathEffect, never>;
-    Blend(props: BlendProps): BlendNode | import("../types").DeclarationNode<BlendProps, import("../..").SkImageFilter, never>;
+    BlurMaskFilter(props: BlurMaskFilterProps): import("../types").DeclarationNode<BlurMaskFilterProps>;
+    BlendImageFilter(props: BlendImageFilterProps): import("../types").DeclarationNode<BlendImageFilterProps>;
+    DropShadowImageFilter(props: DropShadowImageFilterProps): import("../types").DeclarationNode<DropShadowImageFilterProps>;
+    DisplacementMapImageFilter(props: DisplacementMapImageFilterProps): import("../types").DeclarationNode<DisplacementMapImageFilterProps>;
+    BlurImageFilter(props: BlurImageFilterProps): import("../types").DeclarationNode<BlurImageFilterProps>;
+    OffsetImageFilter(props: OffsetImageFilterProps): import("../types").DeclarationNode<OffsetImageFilterProps>;
+    MorphologyImageFilter(props: MorphologyImageFilterProps): import("../types").DeclarationNode<MorphologyImageFilterProps>;
+    RuntimeShaderImageFilter(props: RuntimeShaderImageFilterProps): import("../types").DeclarationNode<RuntimeShaderImageFilterProps>;
+    MatrixColorFilter(props: MatrixColorFilterProps): import("../types").DeclarationNode<MatrixColorFilterProps>;
+    BlendColorFilter(props: BlendColorFilterProps): import("../types").DeclarationNode<BlendColorFilterProps>;
+    LumaColorFilter(): import("../types").DeclarationNode<null>;
+    LinearToSRGBGammaColorFilter(): import("../types").DeclarationNode<null>;
+    SRGBToLinearGammaColorFilter(): import("../types").DeclarationNode<null>;
+    LerpColorFilter(props: LerpColorFilterProps): import("../types").DeclarationNode<LerpColorFilterProps>;
+    Shader(props: ShaderProps): import("../types").DeclarationNode<ShaderProps>;
+    ImageShader(props: ImageShaderProps): import("../types").DeclarationNode<ImageShaderProps>;
+    ColorShader(props: ColorProps): import("../types").DeclarationNode<ColorProps>;
+    SweepGradient(props: SweepGradientProps): import("../types").DeclarationNode<SweepGradientProps>;
+    Turbulence(props: TurbulenceProps): import("../types").DeclarationNode<TurbulenceProps>;
+    FractalNoise(props: FractalNoiseProps): import("../types").DeclarationNode<FractalNoiseProps>;
+    LinearGradient(props: LinearGradientProps): import("../types").DeclarationNode<LinearGradientProps>;
+    RadialGradient(props: RadialGradientProps): import("../types").DeclarationNode<RadialGradientProps>;
+    TwoPointConicalGradient(props: TwoPointConicalGradientProps): import("../types").DeclarationNode<TwoPointConicalGradientProps>;
+    CornerPathEffect(props: CornerPathEffectProps): import("../types").DeclarationNode<CornerPathEffectProps>;
+    DiscretePathEffect(props: DiscretePathEffectProps): import("../types").DeclarationNode<DiscretePathEffectProps>;
+    DashPathEffect(props: DashPathEffectProps): import("../types").DeclarationNode<DashPathEffectProps>;
+    Path1DPathEffect(props: Path1DPathEffectProps): import("../types").DeclarationNode<Path1DPathEffectProps>;
+    Path2DPathEffect(props: Path2DPathEffectProps): import("../types").DeclarationNode<Path2DPathEffectProps>;
+    SumPathEffect(): import("../types").DeclarationNode<null>;
+    Line2DPathEffect(props: Line2DPathEffectProps): import("../types").DeclarationNode<Line2DPathEffectProps>;
+    Blend(props: BlendProps): import("../types").DeclarationNode<BlendProps>;
     BackdropFilter(props: ChildrenProps): import("../types").RenderNode<ChildrenProps>;
     Box(props: BoxProps): import("../types").RenderNode<BoxProps>;
-    BoxShadow(props: BoxShadowProps): import("../types").DeclarationNode<BoxShadowProps, BoxShadowProps, never>;
+    BoxShadow(props: BoxShadowProps): import("../types").DeclarationNode<BoxShadowProps>;
 }

package/lib/typescript/src/dom/nodes/Node.d.ts

@@ -1,7 +1,7 @@
-import type { SkColorFilter, Skia, SkImageFilter, SkMaskFilter, SkShader, SkPathEffect, SkPaint } from "../../skia/types";
-import type { Node, DeclarationNode, NodeType } from "../types";
-import { DeclarationType } from "../types";
+import type { Skia } from "../../skia/types";
+import type { Node, DeclarationNode, NodeType, DeclarationType } from "../types";
 import type { DependencyManager } from "../../renderer/DependencyManager";
+import type { DeclarationContext } from "../types/DeclarationContext";
 export interface NodeContext {
     Skia: Skia;
     depMgr: DependencyManager;
@@ -23,21 +23,16 @@ export declare abstract class JsiNode<P> implements Node<P> {
     insertChildBefore(child: Node<unknown>, before: Node<unknown>): void;
 }
 export declare type Invalidate = () => void;
-export declare abstract class JsiDeclarationNode<P, T, Nullable extends null | never = never> extends JsiNode<P> implements DeclarationNode<P, T, Nullable> {
+export declare abstract class JsiDeclarationNode<P> extends JsiNode<P> implements DeclarationNode<P> {
     declarationType: DeclarationType;
     private invalidate;
     constructor(ctx: NodeContext, declarationType: DeclarationType, type: NodeType, props: P);
-    abstract materialize(): T | Nullable;
+    abstract decorate(ctx: DeclarationContext): void;
+    protected decorateChildren(ctx: DeclarationContext): void;
     addChild(child: Node<unknown>): void;
     insertChildBefore(child: Node<unknown>, before: Node<unknown>): void;
     dispose(): void;
     setInvalidate(invalidate: Invalidate): void;
     setProps(props: P): void;
     setProp<K extends keyof P>(name: K, v: P[K]): boolean;
-    isPaint(): this is DeclarationNode<unknown, SkPaint>;
-    isImageFilter(): this is DeclarationNode<unknown, SkImageFilter>;
-    isColorFilter(): this is DeclarationNode<unknown, SkColorFilter>;
-    isShader(): this is DeclarationNode<unknown, SkShader>;
-    isMaskFilter(): this is DeclarationNode<unknown, SkMaskFilter>;
-    isPathEffect(): this is DeclarationNode<unknown, SkPathEffect>;
 }

package/lib/typescript/src/dom/nodes/PaintNode.d.ts

@@ -1,8 +1,8 @@
-import type { SkPaint } from "../../skia/types";
 import type { DeclarationNode, PaintProps } from "../types";
+import type { DeclarationContext } from "../types/DeclarationContext";
 import type { NodeContext } from "./Node";
 import { JsiDeclarationNode } from "./Node";
-export declare class PaintNode extends JsiDeclarationNode<PaintProps, SkPaint> implements DeclarationNode<PaintProps, SkPaint> {
+export declare class PaintNode extends JsiDeclarationNode<PaintProps> implements DeclarationNode<PaintProps> {
     constructor(ctx: NodeContext, props?: PaintProps);
-    materialize(): SkPaint;
+    decorate(ctx: DeclarationContext): void;
 }

package/lib/typescript/src/dom/nodes/RenderNode.d.ts

@@ -1,5 +1,5 @@
 import type { SkMatrix, SkRect, SkRRect, SkPath, SkPaint } from "../../skia/types";
-import type { RenderNode, GroupProps, DrawingContext, NodeType, Node } from "../types";
+import type { RenderNode, GroupProps, NodeType, Node, DrawingContext } from "../types";
 import type { NodeContext } from "./Node";
 import { JsiNode } from "./Node";
 interface PaintCache {
@@ -20,8 +20,7 @@ export declare abstract class JsiRenderNode<P extends GroupProps> extends JsiNod
     insertChildBefore(child: Node<unknown>, before: Node<unknown>): void;
     private computeClip;
     private computeMatrix;
-    private getPaintCtx;
-    render(parentCtx: DrawingContext): void;
+    render(ctx: DrawingContext): void;
     abstract renderNode(ctx: DrawingContext): void;
 }
 export {};

package/lib/typescript/src/dom/nodes/drawings/BackdropFilterNode.d.ts

@@ -4,5 +4,5 @@ import type { NodeContext } from "../Node";
 export declare class BackdropFilterNode extends JsiDrawingNode<ChildrenProps, null> {
     constructor(ctx: NodeContext, props: ChildrenProps);
     protected deriveProps(): null;
-    draw({ canvas }: DrawingContext): void;
+    draw({ canvas, declarationCtx }: DrawingContext): void;
 }

package/lib/typescript/src/dom/nodes/drawings/Box.d.ts

@@ -3,8 +3,10 @@ import type { BoxShadowProps, BoxProps } from "../../types/Drawings";
 import type { NodeContext } from "../Node";
 import { JsiDeclarationNode } from "../Node";
 import { JsiRenderNode } from "../RenderNode";
-export declare class BoxShadowNode extends JsiDeclarationNode<BoxShadowProps, BoxShadowProps> {
+import type { DeclarationContext } from "../../types/DeclarationContext";
+export declare class BoxShadowNode extends JsiDeclarationNode<BoxShadowProps> {
     constructor(ctx: NodeContext, props: BoxShadowProps);
+    decorate(_ctx: DeclarationContext): void;
     materialize(): BoxShadowProps;
 }
 export declare class BoxNode extends JsiRenderNode<BoxProps> {

package/lib/typescript/src/dom/nodes/paint/BlendNode.d.ts

@@ -1,12 +1,8 @@
 import type { BlendProps } from "../../types/ImageFilters";
-import type { SkShader, SkImageFilter } from "../../../skia/types";
 import type { NodeContext } from "../Node";
 import { JsiDeclarationNode } from "../Node";
-import type { Node } from "../../types";
-export declare class BlendNode extends JsiDeclarationNode<BlendProps, SkShader | SkImageFilter> {
+import type { DeclarationContext } from "../../types/DeclarationContext";
+export declare class BlendNode extends JsiDeclarationNode<BlendProps> {
     constructor(ctx: NodeContext, props: BlendProps);
-    private checkChild;
-    addChild(child: Node<unknown>): void;
-    insertChildBefore(child: Node<unknown>, before: Node<unknown>): void;
-    materialize(): SkImageFilter | SkShader;
+    decorate(ctx: DeclarationContext): void;
 }

package/lib/typescript/src/dom/nodes/paint/ColorFilters.d.ts

@@ -1,36 +1,35 @@
 import type { SkColorFilter } from "../../../skia/types";
 import type { NodeContext } from "../Node";
 import { JsiDeclarationNode } from "../Node";
-import type { BlendColorFilterProps, MatrixColorFilterProps, Node } from "../../types";
+import type { BlendColorFilterProps, MatrixColorFilterProps } from "../../types";
 import { NodeType } from "../../types";
 import type { LerpColorFilterProps } from "../../types/ColorFilters";
-export declare abstract class ColorFilterDeclaration<P, Nullable extends null | never = never> extends JsiDeclarationNode<P, SkColorFilter, Nullable> {
+import type { DeclarationContext } from "../../types/DeclarationContext";
+export declare abstract class ColorFilterDeclaration<P> extends JsiDeclarationNode<P> {
     constructor(ctx: NodeContext, type: NodeType, props: P);
-    addChild(child: Node<unknown>): void;
-    insertChildBefore(child: Node<unknown>, before: Node<unknown>): void;
-    compose(filter: SkColorFilter): SkColorFilter;
+    protected composeAndPush(ctx: DeclarationContext, cf1: SkColorFilter): void;
 }
 export declare class MatrixColorFilterNode extends ColorFilterDeclaration<MatrixColorFilterProps> {
     constructor(ctx: NodeContext, props: MatrixColorFilterProps);
-    materialize(): SkColorFilter;
+    decorate(ctx: DeclarationContext): void;
 }
 export declare class BlendColorFilterNode extends ColorFilterDeclaration<BlendColorFilterProps> {
     constructor(ctx: NodeContext, props: BlendColorFilterProps);
-    materialize(): SkColorFilter;
+    decorate(ctx: DeclarationContext): void;
 }
 export declare class LinearToSRGBGammaColorFilterNode extends ColorFilterDeclaration<null> {
     constructor(ctx: NodeContext);
-    materialize(): SkColorFilter;
+    decorate(ctx: DeclarationContext): void;
 }
 export declare class SRGBToLinearGammaColorFilterNode extends ColorFilterDeclaration<null> {
     constructor(ctx: NodeContext);
-    materialize(): SkColorFilter;
+    decorate(ctx: DeclarationContext): void;
 }
 export declare class LumaColorFilterNode extends ColorFilterDeclaration<null> {
     constructor(ctx: NodeContext);
-    materialize(): SkColorFilter;
+    decorate(ctx: DeclarationContext): void;
 }
 export declare class LerpColorFilterNode extends ColorFilterDeclaration<LerpColorFilterProps> {
     constructor(ctx: NodeContext, props: LerpColorFilterProps);
-    materialize(): SkColorFilter;
+    decorate(ctx: DeclarationContext): void;
 }

package/lib/typescript/src/dom/nodes/paint/ImageFilters.d.ts

@@ -1,28 +1,28 @@
 import type { SkImageFilter } from "../../../skia/types";
-import type { BlendImageFilterProps, BlurImageFilterProps, DisplacementMapImageFilterProps, DropShadowImageFilterProps, MorphologyImageFilterProps, OffsetImageFilterProps, RuntimeShaderImageFilterProps } from "../../types";
+import type { BlendImageFilterProps, BlurImageFilterProps, DeclarationContext, DisplacementMapImageFilterProps, DropShadowImageFilterProps, MorphologyImageFilterProps, OffsetImageFilterProps, RuntimeShaderImageFilterProps } from "../../types";
 import { NodeType } from "../../types";
 import type { NodeContext } from "../Node";
 import { JsiDeclarationNode } from "../Node";
-export declare abstract class ImageFilterDeclaration<P, Nullable extends null | never = never> extends JsiDeclarationNode<P, SkImageFilter, Nullable> {
+export declare abstract class ImageFilterDeclaration<P> extends JsiDeclarationNode<P> {
     constructor(ctx: NodeContext, type: NodeType, props: P);
-    getOptionalChildInstance(index: number): any;
-    getMandatoryChildInstance(index: number): any;
+    protected input(ctx: DeclarationContext): SkImageFilter | null;
+    protected composeAndPush(ctx: DeclarationContext, imgf1: SkImageFilter): void;
 }
 export declare class OffsetImageFilterNode extends ImageFilterDeclaration<OffsetImageFilterProps> {
     constructor(ctx: NodeContext, props: OffsetImageFilterProps);
-    materialize(): SkImageFilter;
+    decorate(ctx: DeclarationContext): void;
 }
 export declare class DisplacementMapImageFilterNode extends ImageFilterDeclaration<DisplacementMapImageFilterProps> {
     constructor(ctx: NodeContext, props: DisplacementMapImageFilterProps);
-    materialize(): SkImageFilter;
+    decorate(ctx: DeclarationContext): void;
 }
 export declare class BlurImageFilterNode extends ImageFilterDeclaration<BlurImageFilterProps> {
     constructor(ctx: NodeContext, props: BlurImageFilterProps);
-    materialize(): SkImageFilter;
+    decorate(ctx: DeclarationContext): void;
 }
 export declare class DropShadowImageFilterNode extends ImageFilterDeclaration<DropShadowImageFilterProps> {
     constructor(ctx: NodeContext, props: DropShadowImageFilterProps);
-    materialize(): SkImageFilter;
+    decorate(ctx: DeclarationContext): void;
 }
 export declare enum MorphologyOperator {
     Erode = 0,
@@ -30,13 +30,13 @@ export declare enum MorphologyOperator {
 }
 export declare class MorphologyImageFilterNode extends ImageFilterDeclaration<MorphologyImageFilterProps> {
     constructor(ctx: NodeContext, props: MorphologyImageFilterProps);
-    materialize(): SkImageFilter;
+    decorate(ctx: DeclarationContext): void;
 }
 export declare class BlendImageFilterNode extends ImageFilterDeclaration<BlendImageFilterProps> {
     constructor(ctx: NodeContext, props: BlendImageFilterProps);
-    materialize(): SkImageFilter;
+    decorate(ctx: DeclarationContext): void;
 }
 export declare class RuntimeShaderImageFilterNode extends ImageFilterDeclaration<RuntimeShaderImageFilterProps> {
     constructor(ctx: NodeContext, props: RuntimeShaderImageFilterProps);
-    materialize(): SkImageFilter;
+    decorate(ctx: DeclarationContext): void;
 }

package/lib/typescript/src/dom/nodes/paint/MaskFilters.d.ts

@@ -1,8 +1,8 @@
-import type { SkMaskFilter } from "../../../skia/types";
 import type { NodeContext } from "../Node";
 import { JsiDeclarationNode } from "../Node";
 import type { BlurMaskFilterProps } from "../../types";
-export declare class BlurMaskFilterNode extends JsiDeclarationNode<BlurMaskFilterProps, SkMaskFilter> {
+import type { DeclarationContext } from "../../types/DeclarationContext";
+export declare class BlurMaskFilterNode extends JsiDeclarationNode<BlurMaskFilterProps> {
     constructor(ctx: NodeContext, props: BlurMaskFilterProps);
-    materialize(): SkMaskFilter;
+    decorate(ctx: DeclarationContext): void;
 }

package/lib/typescript/src/dom/nodes/paint/PathEffects.d.ts

@@ -1,42 +1,39 @@
 import type { SkPathEffect } from "../../../skia/types";
 import type { NodeContext } from "../Node";
 import { JsiDeclarationNode } from "../Node";
-import type { CornerPathEffectProps, DashPathEffectProps, DiscretePathEffectProps, Line2DPathEffectProps, Node, Path1DPathEffectProps, Path2DPathEffectProps } from "../../types";
+import type { CornerPathEffectProps, DashPathEffectProps, DiscretePathEffectProps, Line2DPathEffectProps, Path1DPathEffectProps, Path2DPathEffectProps } from "../../types";
 import { NodeType } from "../../types";
-declare abstract class PathEffectDeclaration<P, Nullable extends null | never = never> extends JsiDeclarationNode<P, SkPathEffect, Nullable> {
+import type { DeclarationContext } from "../../types/DeclarationContext";
+declare abstract class PathEffectDeclaration<P> extends JsiDeclarationNode<P> {
     constructor(ctx: NodeContext, type: NodeType, props: P);
-    addChild(child: Node<unknown>): void;
-    insertChildBefore(child: Node<unknown>, before: Node<unknown>): void;
-    compose(pe: SkPathEffect): SkPathEffect;
-    getOptionalChildInstance(index: number): any;
-    getMandatoryChildInstance(index: number): any;
+    protected composeAndPush(ctx: DeclarationContext, pe1: SkPathEffect): void;
 }
 export declare class DiscretePathEffectNode extends PathEffectDeclaration<DiscretePathEffectProps> {
     constructor(ctx: NodeContext, props: DiscretePathEffectProps);
-    materialize(): SkPathEffect;
+    decorate(ctx: DeclarationContext): void;
 }
-export declare class Path2DPathEffectNode extends PathEffectDeclaration<Path2DPathEffectProps, null> {
+export declare class Path2DPathEffectNode extends PathEffectDeclaration<Path2DPathEffectProps> {
     constructor(ctx: NodeContext, props: Path2DPathEffectProps);
-    materialize(): SkPathEffect | null;
+    decorate(ctx: DeclarationContext): void;
 }
 export declare class DashPathEffectNode extends PathEffectDeclaration<DashPathEffectProps> {
     constructor(ctx: NodeContext, props: DashPathEffectProps);
-    materialize(): SkPathEffect;
+    decorate(ctx: DeclarationContext): void;
 }
-export declare class CornerPathEffectNode extends PathEffectDeclaration<CornerPathEffectProps, null> {
+export declare class CornerPathEffectNode extends PathEffectDeclaration<CornerPathEffectProps> {
     constructor(ctx: NodeContext, props: CornerPathEffectProps);
-    materialize(): SkPathEffect | null;
+    decorate(ctx: DeclarationContext): void;
 }
 export declare class SumPathEffectNode extends PathEffectDeclaration<null> {
     constructor(ctx: NodeContext);
-    materialize(): SkPathEffect;
+    decorate(ctx: DeclarationContext): void;
 }
-export declare class Line2DPathEffectNode extends PathEffectDeclaration<Line2DPathEffectProps, null> {
+export declare class Line2DPathEffectNode extends PathEffectDeclaration<Line2DPathEffectProps> {
     constructor(ctx: NodeContext, props: Line2DPathEffectProps);
-    materialize(): SkPathEffect | null;
+    decorate(ctx: DeclarationContext): void;
 }
-export declare class Path1DPathEffectNode extends PathEffectDeclaration<Path1DPathEffectProps, null> {
+export declare class Path1DPathEffectNode extends PathEffectDeclaration<Path1DPathEffectProps> {
     constructor(ctx: NodeContext, props: Path1DPathEffectProps);
-    materialize(): SkPathEffect | null;
+    decorate(ctx: DeclarationContext): void;
 }
 export {};