@shopify/react-native-skia 0.1.172 → 0.1.174

package/lib/commonjs/skia/web/JsiSkSurfaceFactory.js

@@ -18,7 +18,27 @@ class JsiSkSurfaceFactory extends _Host.Host {
     const surface = this.CanvasKit.MakeSurface(width, height);
 
     if (!surface) {
-      throw new Error("Could not create surface");
+      return null;
+    }
+
+    return new _JsiSkSurface.JsiSkSurface(this.CanvasKit, surface);
+  }
+
+  MakeOffscreen(width, height) {
+    // OffscreenCanvas may be unvailable in some environments.
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const OC = globalThis.OffscreenCanvas;
+    let surface;
+
+    if (OC === undefined) {
+      surface = this.CanvasKit.MakeSurface(width, height);
+    } else {
+      const offscreen = new OC(width, height);
+      surface = this.CanvasKit.MakeWebGLCanvasSurface(offscreen);
+    }
+
+    if (!surface) {
+      return null;
     }
 
     return new _JsiSkSurface.JsiSkSurface(this.CanvasKit, surface);

package/lib/commonjs/skia/web/JsiSkSurfaceFactory.js.map

@@ -1 +1 @@
-{"version":3,"names":["JsiSkSurfaceFactory","Host","constructor","CanvasKit","Make","width","height","surface","MakeSurface","Error","JsiSkSurface"],"sources":["JsiSkSurfaceFactory.ts"],"sourcesContent":["import type { CanvasKit } from \"canvaskit-wasm\";\n\nimport type { SurfaceFactory } from \"../types\";\n\nimport { Host } from \"./Host\";\nimport { JsiSkSurface } from \"./JsiSkSurface\";\n\nexport class JsiSkSurfaceFactory extends Host implements SurfaceFactory {\n  constructor(CanvasKit: CanvasKit) {\n    super(CanvasKit);\n  }\n\n  Make(width: number, height: number) {\n    const surface = this.CanvasKit.MakeSurface(width, height);\n    if (!surface) {\n      throw new Error(\"Could not create surface\");\n    }\n    return new JsiSkSurface(this.CanvasKit, surface);\n  }\n}\n"],"mappings":";;;;;;;AAIA;;AACA;;AAEO,MAAMA,mBAAN,SAAkCC,UAAlC,CAAiE;EACtEC,WAAW,CAACC,SAAD,EAAuB;IAChC,MAAMA,SAAN;EACD;;EAEDC,IAAI,CAACC,KAAD,EAAgBC,MAAhB,EAAgC;IAClC,MAAMC,OAAO,GAAG,KAAKJ,SAAL,CAAeK,WAAf,CAA2BH,KAA3B,EAAkCC,MAAlC,CAAhB;;IACA,IAAI,CAACC,OAAL,EAAc;MACZ,MAAM,IAAIE,KAAJ,CAAU,0BAAV,CAAN;IACD;;IACD,OAAO,IAAIC,0BAAJ,CAAiB,KAAKP,SAAtB,EAAiCI,OAAjC,CAAP;EACD;;AAXqE"}
+{"version":3,"names":["JsiSkSurfaceFactory","Host","constructor","CanvasKit","Make","width","height","surface","MakeSurface","JsiSkSurface","MakeOffscreen","OC","globalThis","OffscreenCanvas","undefined","offscreen","MakeWebGLCanvasSurface"],"sources":["JsiSkSurfaceFactory.ts"],"sourcesContent":["import type { CanvasKit, Surface } from \"canvaskit-wasm\";\n\nimport type { SurfaceFactory } from \"../types\";\n\nimport { Host } from \"./Host\";\nimport { JsiSkSurface } from \"./JsiSkSurface\";\n\nexport class JsiSkSurfaceFactory extends Host implements SurfaceFactory {\n  constructor(CanvasKit: CanvasKit) {\n    super(CanvasKit);\n  }\n\n  Make(width: number, height: number) {\n    const surface = this.CanvasKit.MakeSurface(width, height);\n    if (!surface) {\n      return null;\n    }\n    return new JsiSkSurface(this.CanvasKit, surface);\n  }\n\n  MakeOffscreen(width: number, height: number) {\n    // OffscreenCanvas may be unvailable in some environments.\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    const OC = (globalThis as any).OffscreenCanvas;\n    let surface: Surface | null;\n    if (OC === undefined) {\n      surface = this.CanvasKit.MakeSurface(width, height);\n    } else {\n      const offscreen = new OC(width, height);\n      surface = this.CanvasKit.MakeWebGLCanvasSurface(\n        offscreen as unknown as HTMLCanvasElement\n      );\n    }\n    if (!surface) {\n      return null;\n    }\n    return new JsiSkSurface(this.CanvasKit, surface);\n  }\n}\n"],"mappings":";;;;;;;AAIA;;AACA;;AAEO,MAAMA,mBAAN,SAAkCC,UAAlC,CAAiE;EACtEC,WAAW,CAACC,SAAD,EAAuB;IAChC,MAAMA,SAAN;EACD;;EAEDC,IAAI,CAACC,KAAD,EAAgBC,MAAhB,EAAgC;IAClC,MAAMC,OAAO,GAAG,KAAKJ,SAAL,CAAeK,WAAf,CAA2BH,KAA3B,EAAkCC,MAAlC,CAAhB;;IACA,IAAI,CAACC,OAAL,EAAc;MACZ,OAAO,IAAP;IACD;;IACD,OAAO,IAAIE,0BAAJ,CAAiB,KAAKN,SAAtB,EAAiCI,OAAjC,CAAP;EACD;;EAEDG,aAAa,CAACL,KAAD,EAAgBC,MAAhB,EAAgC;IAC3C;IACA;IACA,MAAMK,EAAE,GAAIC,UAAD,CAAoBC,eAA/B;IACA,IAAIN,OAAJ;;IACA,IAAII,EAAE,KAAKG,SAAX,EAAsB;MACpBP,OAAO,GAAG,KAAKJ,SAAL,CAAeK,WAAf,CAA2BH,KAA3B,EAAkCC,MAAlC,CAAV;IACD,CAFD,MAEO;MACL,MAAMS,SAAS,GAAG,IAAIJ,EAAJ,CAAON,KAAP,EAAcC,MAAd,CAAlB;MACAC,OAAO,GAAG,KAAKJ,SAAL,CAAea,sBAAf,CACRD,SADQ,CAAV;IAGD;;IACD,IAAI,CAACR,OAAL,EAAc;MACZ,OAAO,IAAP;IACD;;IACD,OAAO,IAAIE,0BAAJ,CAAiB,KAAKN,SAAtB,EAAiCI,OAAjC,CAAP;EACD;;AA9BqE"}

package/lib/commonjs/views/SkiaBaseWebView.js

@@ -114,9 +114,13 @@ class SkiaBaseWebView extends _react.default.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
@@ -131,15 +135,17 @@ class SkiaBaseWebView extends _react.default.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/commonjs/views/SkiaBaseWebView.js.map

@@ -1 +1 @@
-{"version":3,"names":["pd","PixelRatio","get","SkiaBaseWebView","React","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","JsiSkSurface","_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","TouchType","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":["pd","PixelRatio","get","SkiaBaseWebView","React","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","JsiSkSurface","_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","TouchType","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/commonjs/views/SkiaDomView.web.js

@@ -5,13 +5,11 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.SkiaDomView = void 0;
 
-var _reactNative = require("react-native");
-
 var _skia = require("../skia");
 
-var _SkiaBaseWebView = require("./SkiaBaseWebView");
+var _DrawingContext = require("../dom/types/DrawingContext");
 
-const pd = _reactNative.PixelRatio.get();
+var _SkiaBaseWebView = require("./SkiaBaseWebView");
 
 class SkiaDomView extends _SkiaBaseWebView.SkiaBaseWebView {
   constructor(props) {
@@ -35,17 +33,8 @@ class SkiaDomView extends _SkiaBaseWebView.SkiaBaseWebView {
     }
 
     if (this.props.root) {
-      const paint = _skia.Skia.Paint();
-
-      const ctx = {
-        canvas,
-        paint,
-        opacity: 1
-      };
-      canvas.save();
-      canvas.scale(pd, pd);
+      const ctx = new _DrawingContext.JsiDrawingContext(_skia.Skia, canvas);
       this.props.root.render(ctx);
-      canvas.restore();
     }
   }
 

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

@@ -1 +1 @@
-{"version":3,"names":["pd","PixelRatio","get","SkiaDomView","SkiaBaseWebView","constructor","props","renderInCanvas","canvas","touches","onTouch","onSize","width","height","getSize","current","root","paint","Skia","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;;AAEA;;AAGA;;AAGA,MAAMA,EAAE,GAAGC,uBAAA,CAAWC,GAAX,EAAX;;AAEO,MAAMC,WAAN,SAA0BC,gCAA1B,CAA4D;EACjEC,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,GAAGC,UAAA,CAAKC,KAAL,EAAd;;MACA,MAAMC,GAAG,GAAG;QACVZ,MADU;QAEVS,KAFU;QAGVI,OAAO,EAAE;MAHC,CAAZ;MAKAb,MAAM,CAACc,IAAP;MACAd,MAAM,CAACe,KAAP,CAAavB,EAAb,EAAiBA,EAAjB;MACA,KAAKM,KAAL,CAAWU,IAAX,CAAgBQ,MAAhB,CAAuBJ,GAAvB;MACAZ,MAAM,CAACiB,OAAP;IACD;EACF;;AAzBgE"}
+{"version":3,"names":["SkiaDomView","SkiaBaseWebView","constructor","props","renderInCanvas","canvas","touches","onTouch","onSize","width","height","getSize","current","root","ctx","JsiDrawingContext","Skia","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;;AAEA;;AAEA;;AAGO,MAAMA,WAAN,SAA0BC,gCAA1B,CAA4D;EACjEC,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,IAAIC,iCAAJ,CAAsBC,UAAtB,EAA4BX,MAA5B,CAAZ;MACA,KAAKF,KAAL,CAAWU,IAAX,CAAgBI,MAAhB,CAAuBH,GAAvB;IACD;EACF;;AAjBgE"}

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

@@ -5,12 +5,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.SkiaPictureView = void 0;
 
-var _reactNative = require("react-native");
-
 var _SkiaBaseWebView = require("./SkiaBaseWebView");
 
-const pd = _reactNative.PixelRatio.get();
-
 class SkiaPictureView extends _SkiaBaseWebView.SkiaBaseWebView {
   constructor(props) {
     super(props);
@@ -18,10 +14,7 @@ class SkiaPictureView extends _SkiaBaseWebView.SkiaBaseWebView {
 
   renderInCanvas(canvas) {
     if (this.props.picture) {
-      canvas.save();
-      canvas.scale(pd, pd);
       canvas.drawPicture(this.props.picture);
-      canvas.restore();
     }
   }
 

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

@@ -1 +1 @@
-{"version":3,"names":["pd","PixelRatio","get","SkiaPictureView","SkiaBaseWebView","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;;AAKA;;AAEA,MAAMA,EAAE,GAAGC,uBAAA,CAAWC,GAAX,EAAX;;AAEO,MAAMC,eAAN,SAA8BC,gCAA9B,CAAoE;EACzEC,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,CAAaX,EAAb,EAAiBA,EAAjB;MACAQ,MAAM,CAACI,WAAP,CAAmB,KAAKN,KAAL,CAAWG,OAA9B;MACAD,MAAM,CAACK,OAAP;IACD;EACF;;AAZwE"}
+{"version":3,"names":["SkiaPictureView","SkiaBaseWebView","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;;AAEO,MAAMA,eAAN,SAA8BC,gCAA9B,CAAoE;EACzEC,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/commonjs/views/SkiaView.web.js

@@ -5,12 +5,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.SkiaView = void 0;
 
-var _reactNative = require("react-native");
-
 var _SkiaBaseWebView = require("./SkiaBaseWebView");
 
-const pd = _reactNative.PixelRatio.get();
-
 class SkiaView extends _SkiaBaseWebView.SkiaBaseWebView {
   constructor(props) {
     super(props);
@@ -24,10 +20,7 @@ class SkiaView extends _SkiaBaseWebView.SkiaBaseWebView {
         timestamp: Date.now(),
         touches: touches.map(t => [t])
       };
-      canvas.save();
-      canvas.scale(pd, pd);
       this.props.onDraw(canvas, info);
-      canvas.restore();
     }
   }
 

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

@@ -1 +1 @@
-{"version":3,"names":["pd","PixelRatio","get","SkiaView","SkiaBaseWebView","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;;AAKA;;AAEA,MAAMA,EAAE,GAAGC,uBAAA,CAAWC,GAAX,EAAX;;AAEO,MAAMC,QAAN,SAAuBC,gCAAvB,CAA0D;EAC/DC,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,CAAapB,EAAb,EAAiBA,EAAjB;MACA,KAAKM,KAAL,CAAWI,MAAX,CAAkBF,MAAlB,EAA0BG,IAA1B;MACAH,MAAM,CAACa,OAAP;IACD;EACF;;AAlB8D"}
+{"version":3,"names":["SkiaView","SkiaBaseWebView","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;;AAEO,MAAMA,QAAN,SAAuBC,gCAAvB,CAA0D;EAC/DC,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/module/dom/nodes/DrawingNode.js

@@ -56,7 +56,11 @@ export class JsiDrawingNode extends JsiRenderNode {
 
     this.children().map(child => {
       if (child instanceof PaintNode) {
-        const paint = child.materialize();
+        const declCtx = ctx.declarationCtx;
+        declCtx.save();
+        child.decorate(declCtx);
+        const paint = declCtx.paints.pop();
+        declCtx.restore();
         this.draw({ ...ctx,
           paint
         });

package/lib/module/dom/nodes/DrawingNode.js.map

@@ -1 +1 @@
-{"version":3,"names":["JsiDeclarationNode","PaintNode","JsiRenderNode","JsiDrawingNode","constructor","ctx","type","props","derived","deriveProps","setProps","setProp","name","value","hasChanged","addChild","child","Error","insertChildBefore","before","renderNode","paint","draw","children","map","materialize"],"sources":["DrawingNode.ts"],"sourcesContent":["import type {\n  DrawingContext,\n  DrawingNodeProps,\n  Node,\n  NodeType,\n  RenderNode,\n} from \"../types\";\n\nimport type { NodeContext } from \"./Node\";\nimport { JsiDeclarationNode } from \"./Node\";\nimport { PaintNode } from \"./PaintNode\";\nimport { JsiRenderNode } from \"./RenderNode\";\n\nexport abstract class JsiDrawingNode<P extends DrawingNodeProps, C>\n  extends JsiRenderNode<P>\n  implements RenderNode<P>\n{\n  protected derived?: C;\n\n  constructor(ctx: NodeContext, type: NodeType, props: P) {\n    super(ctx, type, props);\n    this.derived = this.deriveProps();\n  }\n\n  setProps(props: P) {\n    super.setProps(props);\n    this.derived = this.deriveProps();\n  }\n\n  setProp<K extends keyof P>(name: K, value: P[K]) {\n    const hasChanged = super.setProp(name, value);\n    if (hasChanged) {\n      this.derived = this.deriveProps();\n    }\n    return hasChanged;\n  }\n\n  addChild(child: Node<unknown>): void {\n    if (!(child instanceof JsiDeclarationNode)) {\n      throw new Error(`Cannot add ${child.type} to ${this.type}`);\n    }\n    super.addChild(child);\n    this.derived = this.deriveProps();\n  }\n\n  insertChildBefore(child: Node<unknown>, before: Node<unknown>): void {\n    if (!(child instanceof JsiDeclarationNode)) {\n      throw new Error(`Cannot add ${child.type} to ${this.type}`);\n    }\n    super.insertChildBefore(child, before);\n    this.derived = this.deriveProps();\n  }\n\n  renderNode(ctx: DrawingContext): void {\n    if (this.props.paint) {\n      this.draw({ ...ctx, paint: this.props.paint });\n    } else {\n      this.draw(ctx);\n    }\n    this.children().map((child) => {\n      if (child instanceof PaintNode) {\n        const paint = child.materialize();\n        this.draw({ ...ctx, paint });\n      }\n    });\n  }\n\n  protected abstract draw(ctx: DrawingContext): void;\n  protected abstract deriveProps(): C;\n}\n"],"mappings":";;AASA,SAASA,kBAAT,QAAmC,QAAnC;AACA,SAASC,SAAT,QAA0B,aAA1B;AACA,SAASC,aAAT,QAA8B,cAA9B;AAEA,OAAO,MAAeC,cAAf,SACGD,aADH,CAGP;EAGEE,WAAW,CAACC,GAAD,EAAmBC,IAAnB,EAAmCC,KAAnC,EAA6C;IACtD,MAAMF,GAAN,EAAWC,IAAX,EAAiBC,KAAjB;;IADsD;;IAEtD,KAAKC,OAAL,GAAe,KAAKC,WAAL,EAAf;EACD;;EAEDC,QAAQ,CAACH,KAAD,EAAW;IACjB,MAAMG,QAAN,CAAeH,KAAf;IACA,KAAKC,OAAL,GAAe,KAAKC,WAAL,EAAf;EACD;;EAEDE,OAAO,CAAoBC,IAApB,EAA6BC,KAA7B,EAA0C;IAC/C,MAAMC,UAAU,GAAG,MAAMH,OAAN,CAAcC,IAAd,EAAoBC,KAApB,CAAnB;;IACA,IAAIC,UAAJ,EAAgB;MACd,KAAKN,OAAL,GAAe,KAAKC,WAAL,EAAf;IACD;;IACD,OAAOK,UAAP;EACD;;EAEDC,QAAQ,CAACC,KAAD,EAA6B;IACnC,IAAI,EAAEA,KAAK,YAAYhB,kBAAnB,CAAJ,EAA4C;MAC1C,MAAM,IAAIiB,KAAJ,CAAW,cAAaD,KAAK,CAACV,IAAK,OAAM,KAAKA,IAAK,EAAnD,CAAN;IACD;;IACD,MAAMS,QAAN,CAAeC,KAAf;IACA,KAAKR,OAAL,GAAe,KAAKC,WAAL,EAAf;EACD;;EAEDS,iBAAiB,CAACF,KAAD,EAAuBG,MAAvB,EAAoD;IACnE,IAAI,EAAEH,KAAK,YAAYhB,kBAAnB,CAAJ,EAA4C;MAC1C,MAAM,IAAIiB,KAAJ,CAAW,cAAaD,KAAK,CAACV,IAAK,OAAM,KAAKA,IAAK,EAAnD,CAAN;IACD;;IACD,MAAMY,iBAAN,CAAwBF,KAAxB,EAA+BG,MAA/B;IACA,KAAKX,OAAL,GAAe,KAAKC,WAAL,EAAf;EACD;;EAEDW,UAAU,CAACf,GAAD,EAA4B;IACpC,IAAI,KAAKE,KAAL,CAAWc,KAAf,EAAsB;MACpB,KAAKC,IAAL,CAAU,EAAE,GAAGjB,GAAL;QAAUgB,KAAK,EAAE,KAAKd,KAAL,CAAWc;MAA5B,CAAV;IACD,CAFD,MAEO;MACL,KAAKC,IAAL,CAAUjB,GAAV;IACD;;IACD,KAAKkB,QAAL,GAAgBC,GAAhB,CAAqBR,KAAD,IAAW;MAC7B,IAAIA,KAAK,YAAYf,SAArB,EAAgC;QAC9B,MAAMoB,KAAK,GAAGL,KAAK,CAACS,WAAN,EAAd;QACA,KAAKH,IAAL,CAAU,EAAE,GAAGjB,GAAL;UAAUgB;QAAV,CAAV;MACD;IACF,CALD;EAMD;;AAjDH"}
+{"version":3,"names":["JsiDeclarationNode","PaintNode","JsiRenderNode","JsiDrawingNode","constructor","ctx","type","props","derived","deriveProps","setProps","setProp","name","value","hasChanged","addChild","child","Error","insertChildBefore","before","renderNode","paint","draw","children","map","declCtx","declarationCtx","save","decorate","paints","pop","restore"],"sources":["DrawingNode.ts"],"sourcesContent":["import type {\n  DrawingContext,\n  DrawingNodeProps,\n  Node,\n  NodeType,\n  RenderNode,\n} from \"../types\";\n\nimport type { NodeContext } from \"./Node\";\nimport { JsiDeclarationNode } from \"./Node\";\nimport { PaintNode } from \"./PaintNode\";\nimport { JsiRenderNode } from \"./RenderNode\";\n\nexport abstract class JsiDrawingNode<P extends DrawingNodeProps, C>\n  extends JsiRenderNode<P>\n  implements RenderNode<P>\n{\n  protected derived?: C;\n\n  constructor(ctx: NodeContext, type: NodeType, props: P) {\n    super(ctx, type, props);\n    this.derived = this.deriveProps();\n  }\n\n  setProps(props: P) {\n    super.setProps(props);\n    this.derived = this.deriveProps();\n  }\n\n  setProp<K extends keyof P>(name: K, value: P[K]) {\n    const hasChanged = super.setProp(name, value);\n    if (hasChanged) {\n      this.derived = this.deriveProps();\n    }\n    return hasChanged;\n  }\n\n  addChild(child: Node<unknown>): void {\n    if (!(child instanceof JsiDeclarationNode)) {\n      throw new Error(`Cannot add ${child.type} to ${this.type}`);\n    }\n    super.addChild(child);\n    this.derived = this.deriveProps();\n  }\n\n  insertChildBefore(child: Node<unknown>, before: Node<unknown>): void {\n    if (!(child instanceof JsiDeclarationNode)) {\n      throw new Error(`Cannot add ${child.type} to ${this.type}`);\n    }\n    super.insertChildBefore(child, before);\n    this.derived = this.deriveProps();\n  }\n\n  renderNode(ctx: DrawingContext): void {\n    if (this.props.paint) {\n      this.draw({ ...ctx, paint: this.props.paint });\n    } else {\n      this.draw(ctx);\n    }\n    this.children().map((child) => {\n      if (child instanceof PaintNode) {\n        const declCtx = ctx.declarationCtx;\n        declCtx.save();\n        child.decorate(declCtx);\n        const paint = declCtx.paints.pop()!;\n        declCtx.restore();\n        this.draw({ ...ctx, paint });\n      }\n    });\n  }\n\n  protected abstract draw(ctx: DrawingContext): void;\n  protected abstract deriveProps(): C;\n}\n"],"mappings":";;AASA,SAASA,kBAAT,QAAmC,QAAnC;AACA,SAASC,SAAT,QAA0B,aAA1B;AACA,SAASC,aAAT,QAA8B,cAA9B;AAEA,OAAO,MAAeC,cAAf,SACGD,aADH,CAGP;EAGEE,WAAW,CAACC,GAAD,EAAmBC,IAAnB,EAAmCC,KAAnC,EAA6C;IACtD,MAAMF,GAAN,EAAWC,IAAX,EAAiBC,KAAjB;;IADsD;;IAEtD,KAAKC,OAAL,GAAe,KAAKC,WAAL,EAAf;EACD;;EAEDC,QAAQ,CAACH,KAAD,EAAW;IACjB,MAAMG,QAAN,CAAeH,KAAf;IACA,KAAKC,OAAL,GAAe,KAAKC,WAAL,EAAf;EACD;;EAEDE,OAAO,CAAoBC,IAApB,EAA6BC,KAA7B,EAA0C;IAC/C,MAAMC,UAAU,GAAG,MAAMH,OAAN,CAAcC,IAAd,EAAoBC,KAApB,CAAnB;;IACA,IAAIC,UAAJ,EAAgB;MACd,KAAKN,OAAL,GAAe,KAAKC,WAAL,EAAf;IACD;;IACD,OAAOK,UAAP;EACD;;EAEDC,QAAQ,CAACC,KAAD,EAA6B;IACnC,IAAI,EAAEA,KAAK,YAAYhB,kBAAnB,CAAJ,EAA4C;MAC1C,MAAM,IAAIiB,KAAJ,CAAW,cAAaD,KAAK,CAACV,IAAK,OAAM,KAAKA,IAAK,EAAnD,CAAN;IACD;;IACD,MAAMS,QAAN,CAAeC,KAAf;IACA,KAAKR,OAAL,GAAe,KAAKC,WAAL,EAAf;EACD;;EAEDS,iBAAiB,CAACF,KAAD,EAAuBG,MAAvB,EAAoD;IACnE,IAAI,EAAEH,KAAK,YAAYhB,kBAAnB,CAAJ,EAA4C;MAC1C,MAAM,IAAIiB,KAAJ,CAAW,cAAaD,KAAK,CAACV,IAAK,OAAM,KAAKA,IAAK,EAAnD,CAAN;IACD;;IACD,MAAMY,iBAAN,CAAwBF,KAAxB,EAA+BG,MAA/B;IACA,KAAKX,OAAL,GAAe,KAAKC,WAAL,EAAf;EACD;;EAEDW,UAAU,CAACf,GAAD,EAA4B;IACpC,IAAI,KAAKE,KAAL,CAAWc,KAAf,EAAsB;MACpB,KAAKC,IAAL,CAAU,EAAE,GAAGjB,GAAL;QAAUgB,KAAK,EAAE,KAAKd,KAAL,CAAWc;MAA5B,CAAV;IACD,CAFD,MAEO;MACL,KAAKC,IAAL,CAAUjB,GAAV;IACD;;IACD,KAAKkB,QAAL,GAAgBC,GAAhB,CAAqBR,KAAD,IAAW;MAC7B,IAAIA,KAAK,YAAYf,SAArB,EAAgC;QAC9B,MAAMwB,OAAO,GAAGpB,GAAG,CAACqB,cAApB;QACAD,OAAO,CAACE,IAAR;QACAX,KAAK,CAACY,QAAN,CAAeH,OAAf;QACA,MAAMJ,KAAK,GAAGI,OAAO,CAACI,MAAR,CAAeC,GAAf,EAAd;QACAL,OAAO,CAACM,OAAR;QACA,KAAKT,IAAL,CAAU,EAAE,GAAGjB,GAAL;UAAUgB;QAAV,CAAV;MACD;IACF,CATD;EAUD;;AArDH"}

package/lib/module/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/module/dom/nodes/LayerNode.js

@@ -1,20 +1,26 @@
 import { NodeType } from "../types";
 import { JsiRenderNode } from "./RenderNode";
 import { JsiDeclarationNode } from "./Node";
-
-const isLayer = node => node instanceof JsiDeclarationNode && node.isPaint();
-
 export class LayerNode extends JsiRenderNode {
   constructor(ctx, props) {
     super(ctx, NodeType.Layer, props);
   }
 
   renderNode(ctx) {
+    let hasLayer = false;
     const [layer, ...children] = this.children();
 
-    if (isLayer(layer)) {
-      const paint = layer.materialize();
-      ctx.canvas.saveLayer(paint);
+    if (layer instanceof JsiDeclarationNode) {
+      const declCtx = ctx.declarationCtx;
+      declCtx.save();
+      layer.decorate(declCtx);
+      const paint = declCtx.paints.pop();
+      declCtx.restore();
+
+      if (paint) {
+        hasLayer = true;
+        ctx.canvas.saveLayer(paint);
+      }
     }
 
     children.map(child => {
@@ -23,7 +29,7 @@ export class LayerNode extends JsiRenderNode {
       }
     });
 
-    if (isLayer(layer)) {
+    if (hasLayer) {
       ctx.canvas.restore();
     }
   }

package/lib/module/dom/nodes/LayerNode.js.map

@@ -1 +1 @@
-{"version":3,"names":["NodeType","JsiRenderNode","JsiDeclarationNode","isLayer","node","isPaint","LayerNode","constructor","ctx","props","Layer","renderNode","layer","children","paint","materialize","canvas","saveLayer","map","child","render","restore"],"sources":["LayerNode.ts"],"sourcesContent":["import type { DeclarationNode, DrawingContext, Node } from \"../types\";\nimport { NodeType } from \"../types\";\nimport type { ChildrenProps } from \"../types/Common\";\nimport type { SkPaint } from \"../../skia\";\n\nimport { JsiRenderNode } from \"./RenderNode\";\nimport type { NodeContext } from \"./Node\";\nimport { JsiDeclarationNode } from \"./Node\";\n\nconst isLayer = (\n  node: Node<unknown>\n): node is DeclarationNode<unknown, SkPaint> =>\n  node instanceof JsiDeclarationNode && node.isPaint();\n\nexport class LayerNode extends JsiRenderNode<ChildrenProps> {\n  constructor(ctx: NodeContext, props: ChildrenProps) {\n    super(ctx, NodeType.Layer, props);\n  }\n\n  renderNode(ctx: DrawingContext): void {\n    const [layer, ...children] = this.children();\n    if (isLayer(layer)) {\n      const paint = layer.materialize() as SkPaint;\n      ctx.canvas.saveLayer(paint);\n    }\n    children.map((child) => {\n      if (child instanceof JsiRenderNode) {\n        child.render(ctx);\n      }\n    });\n    if (isLayer(layer)) {\n      ctx.canvas.restore();\n    }\n  }\n}\n"],"mappings":"AACA,SAASA,QAAT,QAAyB,UAAzB;AAIA,SAASC,aAAT,QAA8B,cAA9B;AAEA,SAASC,kBAAT,QAAmC,QAAnC;;AAEA,MAAMC,OAAO,GACXC,IADc,IAGdA,IAAI,YAAYF,kBAAhB,IAAsCE,IAAI,CAACC,OAAL,EAHxC;;AAKA,OAAO,MAAMC,SAAN,SAAwBL,aAAxB,CAAqD;EAC1DM,WAAW,CAACC,GAAD,EAAmBC,KAAnB,EAAyC;IAClD,MAAMD,GAAN,EAAWR,QAAQ,CAACU,KAApB,EAA2BD,KAA3B;EACD;;EAEDE,UAAU,CAACH,GAAD,EAA4B;IACpC,MAAM,CAACI,KAAD,EAAQ,GAAGC,QAAX,IAAuB,KAAKA,QAAL,EAA7B;;IACA,IAAIV,OAAO,CAACS,KAAD,CAAX,EAAoB;MAClB,MAAME,KAAK,GAAGF,KAAK,CAACG,WAAN,EAAd;MACAP,GAAG,CAACQ,MAAJ,CAAWC,SAAX,CAAqBH,KAArB;IACD;;IACDD,QAAQ,CAACK,GAAT,CAAcC,KAAD,IAAW;MACtB,IAAIA,KAAK,YAAYlB,aAArB,EAAoC;QAClCkB,KAAK,CAACC,MAAN,CAAaZ,GAAb;MACD;IACF,CAJD;;IAKA,IAAIL,OAAO,CAACS,KAAD,CAAX,EAAoB;MAClBJ,GAAG,CAACQ,MAAJ,CAAWK,OAAX;IACD;EACF;;AAnByD"}
+{"version":3,"names":["NodeType","JsiRenderNode","JsiDeclarationNode","LayerNode","constructor","ctx","props","Layer","renderNode","hasLayer","layer","children","declCtx","declarationCtx","save","decorate","paint","paints","pop","restore","canvas","saveLayer","map","child","render"],"sources":["LayerNode.ts"],"sourcesContent":["import type { DrawingContext } from \"../types\";\nimport { NodeType } from \"../types\";\nimport type { ChildrenProps } from \"../types/Common\";\n\nimport { JsiRenderNode } from \"./RenderNode\";\nimport type { NodeContext } from \"./Node\";\nimport { JsiDeclarationNode } from \"./Node\";\n\nexport class LayerNode extends JsiRenderNode<ChildrenProps> {\n  constructor(ctx: NodeContext, props: ChildrenProps) {\n    super(ctx, NodeType.Layer, props);\n  }\n\n  renderNode(ctx: DrawingContext): void {\n    let hasLayer = false;\n    const [layer, ...children] = this.children();\n    if (layer instanceof JsiDeclarationNode) {\n      const declCtx = ctx.declarationCtx;\n      declCtx.save();\n      layer.decorate(declCtx);\n      const paint = declCtx.paints.pop();\n      declCtx.restore();\n      if (paint) {\n        hasLayer = true;\n        ctx.canvas.saveLayer(paint);\n      }\n    }\n    children.map((child) => {\n      if (child instanceof JsiRenderNode) {\n        child.render(ctx);\n      }\n    });\n    if (hasLayer) {\n      ctx.canvas.restore();\n    }\n  }\n}\n"],"mappings":"AACA,SAASA,QAAT,QAAyB,UAAzB;AAGA,SAASC,aAAT,QAA8B,cAA9B;AAEA,SAASC,kBAAT,QAAmC,QAAnC;AAEA,OAAO,MAAMC,SAAN,SAAwBF,aAAxB,CAAqD;EAC1DG,WAAW,CAACC,GAAD,EAAmBC,KAAnB,EAAyC;IAClD,MAAMD,GAAN,EAAWL,QAAQ,CAACO,KAApB,EAA2BD,KAA3B;EACD;;EAEDE,UAAU,CAACH,GAAD,EAA4B;IACpC,IAAII,QAAQ,GAAG,KAAf;IACA,MAAM,CAACC,KAAD,EAAQ,GAAGC,QAAX,IAAuB,KAAKA,QAAL,EAA7B;;IACA,IAAID,KAAK,YAAYR,kBAArB,EAAyC;MACvC,MAAMU,OAAO,GAAGP,GAAG,CAACQ,cAApB;MACAD,OAAO,CAACE,IAAR;MACAJ,KAAK,CAACK,QAAN,CAAeH,OAAf;MACA,MAAMI,KAAK,GAAGJ,OAAO,CAACK,MAAR,CAAeC,GAAf,EAAd;MACAN,OAAO,CAACO,OAAR;;MACA,IAAIH,KAAJ,EAAW;QACTP,QAAQ,GAAG,IAAX;QACAJ,GAAG,CAACe,MAAJ,CAAWC,SAAX,CAAqBL,KAArB;MACD;IACF;;IACDL,QAAQ,CAACW,GAAT,CAAcC,KAAD,IAAW;MACtB,IAAIA,KAAK,YAAYtB,aAArB,EAAoC;QAClCsB,KAAK,CAACC,MAAN,CAAanB,GAAb;MACD;IACF,CAJD;;IAKA,IAAII,QAAJ,EAAc;MACZJ,GAAG,CAACe,MAAJ,CAAWD,OAAX;IACD;EACF;;AA3ByD"}

package/lib/module/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/module/dom/nodes/Node.js

@@ -1,6 +1,5 @@
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
-import { DeclarationType } from "../types";
 export class JsiNode {
   constructor(ctx, type, props) {
     this.type = type;
@@ -75,6 +74,14 @@ export class JsiDeclarationNode extends JsiNode {
     _defineProperty(this, "invalidate", () => {});
   }
 
+  decorateChildren(ctx) {
+    this.children().forEach(child => {
+      if (child instanceof JsiDeclarationNode) {
+        child.decorate(ctx);
+      }
+    });
+  }
+
   addChild(child) {
     if (!(child instanceof JsiDeclarationNode)) {
       throw new Error(`Cannot add child of type ${child.type} to ${this.type}`);
@@ -117,29 +124,5 @@ export class JsiDeclarationNode extends JsiNode {
     return hasChanged;
   }
 
-  isPaint() {
-    return this.declarationType === DeclarationType.Paint;
-  }
-
-  isImageFilter() {
-    return this.declarationType === DeclarationType.ImageFilter;
-  }
-
-  isColorFilter() {
-    return this.declarationType === DeclarationType.ColorFilter;
-  }
-
-  isShader() {
-    return this.declarationType === DeclarationType.Shader;
-  }
-
-  isMaskFilter() {
-    return this.declarationType === DeclarationType.MaskFilter;
-  }
-
-  isPathEffect() {
-    return this.declarationType === DeclarationType.PathEffect;
-  }
-
 }
 //# sourceMappingURL=Node.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["DeclarationType","JsiNode","constructor","ctx","type","props","Skia","depMgr","setProps","setProp","name","v","hasChanged","getProps","children","_children","addChild","child","push","dispose","unsubscribeNode","forEach","removeChild","index","indexOf","node","splice","insertChildBefore","before","beforeIndex","JsiDeclarationNode","declarationType","Error","invalidate","setInvalidate","isPaint","Paint","isImageFilter","ImageFilter","isColorFilter","ColorFilter","isShader","Shader","isMaskFilter","MaskFilter","isPathEffect","PathEffect"],"sources":["Node.ts"],"sourcesContent":["import type {\n  SkColorFilter,\n  Skia,\n  SkImageFilter,\n  SkMaskFilter,\n  SkShader,\n  SkPathEffect,\n  SkPaint,\n} from \"../../skia/types\";\nimport type { Node, DeclarationNode, NodeType } from \"../types\";\nimport { DeclarationType } from \"../types\";\nimport type { DependencyManager } from \"../../renderer/DependencyManager\";\n\nexport interface NodeContext {\n  Skia: Skia;\n  depMgr: DependencyManager;\n}\n\nexport abstract class JsiNode<P> implements Node<P> {\n  protected _children: JsiNode<unknown>[] = [];\n  protected Skia: Skia;\n  protected depMgr: DependencyManager;\n\n  constructor(ctx: NodeContext, public type: NodeType, protected props: P) {\n    this.Skia = ctx.Skia;\n    this.depMgr = ctx.depMgr;\n  }\n\n  setProps(props: P) {\n    this.props = props;\n  }\n\n  setProp<K extends keyof P>(name: K, v: P[K]) {\n    const hasChanged = this.props[name] !== v;\n    this.props[name] = v;\n    return hasChanged;\n  }\n\n  getProps() {\n    return this.props;\n  }\n\n  children() {\n    return this._children;\n  }\n\n  addChild(child: Node<unknown>) {\n    this._children.push(child as JsiNode<unknown>);\n  }\n\n  dispose() {\n    this.depMgr.unsubscribeNode(this);\n    this._children.forEach((child) => child.dispose());\n  }\n\n  removeChild(child: Node<unknown>) {\n    const index = this._children.indexOf(child as JsiNode<unknown>);\n    if (index !== -1) {\n      const [node] = this._children.splice(index, 1);\n      node.dispose();\n    }\n  }\n\n  insertChildBefore(child: Node<unknown>, before: Node<unknown>) {\n    const index = this._children.indexOf(child as JsiNode<unknown>);\n    if (index !== -1) {\n      this._children.splice(index, 1);\n    }\n    const beforeIndex = this._children.indexOf(before as JsiNode<unknown>);\n    this._children.splice(beforeIndex, 0, child as JsiNode<unknown>);\n  }\n}\n\nexport type Invalidate = () => void;\n\nexport abstract class JsiDeclarationNode<\n    P,\n    T,\n    Nullable extends null | never = never\n  >\n  extends JsiNode<P>\n  implements DeclarationNode<P, T, Nullable>\n{\n  private invalidate: Invalidate = () => {};\n\n  constructor(\n    ctx: NodeContext,\n    public declarationType: DeclarationType,\n    type: NodeType,\n    props: P\n  ) {\n    super(ctx, type, props);\n  }\n\n  abstract materialize(): T | Nullable;\n\n  addChild(child: Node<unknown>): void {\n    if (!(child instanceof JsiDeclarationNode)) {\n      throw new Error(`Cannot add child of type ${child.type} to ${this.type}`);\n    }\n    super.addChild(child);\n    this.invalidate();\n  }\n\n  insertChildBefore(child: Node<unknown>, before: Node<unknown>): void {\n    if (!(child instanceof JsiDeclarationNode)) {\n      throw new Error(`Cannot add child of type ${child.type} to ${this.type}`);\n    }\n    super.insertChildBefore(child, before);\n    this.invalidate();\n  }\n\n  dispose() {\n    this.invalidate();\n    super.dispose();\n  }\n\n  setInvalidate(invalidate: Invalidate) {\n    this.invalidate = invalidate;\n  }\n\n  setProps(props: P) {\n    super.setProps(props);\n    this.invalidate();\n  }\n\n  setProp<K extends keyof P>(name: K, v: P[K]) {\n    const hasChanged = super.setProp(name, v);\n    if (hasChanged) {\n      this.invalidate();\n    }\n    return hasChanged;\n  }\n\n  isPaint(): this is DeclarationNode<unknown, SkPaint> {\n    return this.declarationType === DeclarationType.Paint;\n  }\n\n  isImageFilter(): this is DeclarationNode<unknown, SkImageFilter> {\n    return this.declarationType === DeclarationType.ImageFilter;\n  }\n\n  isColorFilter(): this is DeclarationNode<unknown, SkColorFilter> {\n    return this.declarationType === DeclarationType.ColorFilter;\n  }\n\n  isShader(): this is DeclarationNode<unknown, SkShader> {\n    return this.declarationType === DeclarationType.Shader;\n  }\n\n  isMaskFilter(): this is DeclarationNode<unknown, SkMaskFilter> {\n    return this.declarationType === DeclarationType.MaskFilter;\n  }\n\n  isPathEffect(): this is DeclarationNode<unknown, SkPathEffect> {\n    return this.declarationType === DeclarationType.PathEffect;\n  }\n}\n"],"mappings":";;AAUA,SAASA,eAAT,QAAgC,UAAhC;AAQA,OAAO,MAAeC,OAAf,CAA6C;EAKlDC,WAAW,CAACC,GAAD,EAA0BC,IAA1B,EAAoDC,KAApD,EAA8D;IAAA,KAApCD,IAAoC,GAApCA,IAAoC;IAAA,KAAVC,KAAU,GAAVA,KAAU;;IAAA,mCAJ/B,EAI+B;;IAAA;;IAAA;;IACvE,KAAKC,IAAL,GAAYH,GAAG,CAACG,IAAhB;IACA,KAAKC,MAAL,GAAcJ,GAAG,CAACI,MAAlB;EACD;;EAEDC,QAAQ,CAACH,KAAD,EAAW;IACjB,KAAKA,KAAL,GAAaA,KAAb;EACD;;EAEDI,OAAO,CAAoBC,IAApB,EAA6BC,CAA7B,EAAsC;IAC3C,MAAMC,UAAU,GAAG,KAAKP,KAAL,CAAWK,IAAX,MAAqBC,CAAxC;IACA,KAAKN,KAAL,CAAWK,IAAX,IAAmBC,CAAnB;IACA,OAAOC,UAAP;EACD;;EAEDC,QAAQ,GAAG;IACT,OAAO,KAAKR,KAAZ;EACD;;EAEDS,QAAQ,GAAG;IACT,OAAO,KAAKC,SAAZ;EACD;;EAEDC,QAAQ,CAACC,KAAD,EAAuB;IAC7B,KAAKF,SAAL,CAAeG,IAAf,CAAoBD,KAApB;EACD;;EAEDE,OAAO,GAAG;IACR,KAAKZ,MAAL,CAAYa,eAAZ,CAA4B,IAA5B;;IACA,KAAKL,SAAL,CAAeM,OAAf,CAAwBJ,KAAD,IAAWA,KAAK,CAACE,OAAN,EAAlC;EACD;;EAEDG,WAAW,CAACL,KAAD,EAAuB;IAChC,MAAMM,KAAK,GAAG,KAAKR,SAAL,CAAeS,OAAf,CAAuBP,KAAvB,CAAd;;IACA,IAAIM,KAAK,KAAK,CAAC,CAAf,EAAkB;MAChB,MAAM,CAACE,IAAD,IAAS,KAAKV,SAAL,CAAeW,MAAf,CAAsBH,KAAtB,EAA6B,CAA7B,CAAf;;MACAE,IAAI,CAACN,OAAL;IACD;EACF;;EAEDQ,iBAAiB,CAACV,KAAD,EAAuBW,MAAvB,EAA8C;IAC7D,MAAML,KAAK,GAAG,KAAKR,SAAL,CAAeS,OAAf,CAAuBP,KAAvB,CAAd;;IACA,IAAIM,KAAK,KAAK,CAAC,CAAf,EAAkB;MAChB,KAAKR,SAAL,CAAeW,MAAf,CAAsBH,KAAtB,EAA6B,CAA7B;IACD;;IACD,MAAMM,WAAW,GAAG,KAAKd,SAAL,CAAeS,OAAf,CAAuBI,MAAvB,CAApB;;IACA,KAAKb,SAAL,CAAeW,MAAf,CAAsBG,WAAtB,EAAmC,CAAnC,EAAsCZ,KAAtC;EACD;;AApDiD;AAyDpD,OAAO,MAAea,kBAAf,SAKG7B,OALH,CAOP;EAGEC,WAAW,CACTC,GADS,EAEF4B,eAFE,EAGT3B,IAHS,EAITC,KAJS,EAKT;IACA,MAAMF,GAAN,EAAWC,IAAX,EAAiBC,KAAjB;IADA,KAHO0B,eAGP,GAHOA,eAGP;;IAAA,oCAP+B,MAAM,CAAE,CAOvC;EAED;;EAIDf,QAAQ,CAACC,KAAD,EAA6B;IACnC,IAAI,EAAEA,KAAK,YAAYa,kBAAnB,CAAJ,EAA4C;MAC1C,MAAM,IAAIE,KAAJ,CAAW,4BAA2Bf,KAAK,CAACb,IAAK,OAAM,KAAKA,IAAK,EAAjE,CAAN;IACD;;IACD,MAAMY,QAAN,CAAeC,KAAf;IACA,KAAKgB,UAAL;EACD;;EAEDN,iBAAiB,CAACV,KAAD,EAAuBW,MAAvB,EAAoD;IACnE,IAAI,EAAEX,KAAK,YAAYa,kBAAnB,CAAJ,EAA4C;MAC1C,MAAM,IAAIE,KAAJ,CAAW,4BAA2Bf,KAAK,CAACb,IAAK,OAAM,KAAKA,IAAK,EAAjE,CAAN;IACD;;IACD,MAAMuB,iBAAN,CAAwBV,KAAxB,EAA+BW,MAA/B;IACA,KAAKK,UAAL;EACD;;EAEDd,OAAO,GAAG;IACR,KAAKc,UAAL;IACA,MAAMd,OAAN;EACD;;EAEDe,aAAa,CAACD,UAAD,EAAyB;IACpC,KAAKA,UAAL,GAAkBA,UAAlB;EACD;;EAEDzB,QAAQ,CAACH,KAAD,EAAW;IACjB,MAAMG,QAAN,CAAeH,KAAf;IACA,KAAK4B,UAAL;EACD;;EAEDxB,OAAO,CAAoBC,IAApB,EAA6BC,CAA7B,EAAsC;IAC3C,MAAMC,UAAU,GAAG,MAAMH,OAAN,CAAcC,IAAd,EAAoBC,CAApB,CAAnB;;IACA,IAAIC,UAAJ,EAAgB;MACd,KAAKqB,UAAL;IACD;;IACD,OAAOrB,UAAP;EACD;;EAEDuB,OAAO,GAA8C;IACnD,OAAO,KAAKJ,eAAL,KAAyB/B,eAAe,CAACoC,KAAhD;EACD;;EAEDC,aAAa,GAAoD;IAC/D,OAAO,KAAKN,eAAL,KAAyB/B,eAAe,CAACsC,WAAhD;EACD;;EAEDC,aAAa,GAAoD;IAC/D,OAAO,KAAKR,eAAL,KAAyB/B,eAAe,CAACwC,WAAhD;EACD;;EAEDC,QAAQ,GAA+C;IACrD,OAAO,KAAKV,eAAL,KAAyB/B,eAAe,CAAC0C,MAAhD;EACD;;EAEDC,YAAY,GAAmD;IAC7D,OAAO,KAAKZ,eAAL,KAAyB/B,eAAe,CAAC4C,UAAhD;EACD;;EAEDC,YAAY,GAAmD;IAC7D,OAAO,KAAKd,eAAL,KAAyB/B,eAAe,CAAC8C,UAAhD;EACD;;AA1EH"}
+{"version":3,"names":["JsiNode","constructor","ctx","type","props","Skia","depMgr","setProps","setProp","name","v","hasChanged","getProps","children","_children","addChild","child","push","dispose","unsubscribeNode","forEach","removeChild","index","indexOf","node","splice","insertChildBefore","before","beforeIndex","JsiDeclarationNode","declarationType","decorateChildren","decorate","Error","invalidate","setInvalidate"],"sources":["Node.ts"],"sourcesContent":["import type { Skia } from \"../../skia/types\";\nimport type {\n  Node,\n  DeclarationNode,\n  NodeType,\n  DeclarationType,\n} from \"../types\";\nimport type { DependencyManager } from \"../../renderer/DependencyManager\";\nimport type { DeclarationContext } from \"../types/DeclarationContext\";\n\nexport interface NodeContext {\n  Skia: Skia;\n  depMgr: DependencyManager;\n}\n\nexport abstract class JsiNode<P> implements Node<P> {\n  protected _children: JsiNode<unknown>[] = [];\n  protected Skia: Skia;\n  protected depMgr: DependencyManager;\n\n  constructor(ctx: NodeContext, public type: NodeType, protected props: P) {\n    this.Skia = ctx.Skia;\n    this.depMgr = ctx.depMgr;\n  }\n\n  setProps(props: P) {\n    this.props = props;\n  }\n\n  setProp<K extends keyof P>(name: K, v: P[K]) {\n    const hasChanged = this.props[name] !== v;\n    this.props[name] = v;\n    return hasChanged;\n  }\n\n  getProps() {\n    return this.props;\n  }\n\n  children() {\n    return this._children;\n  }\n\n  addChild(child: Node<unknown>) {\n    this._children.push(child as JsiNode<unknown>);\n  }\n\n  dispose() {\n    this.depMgr.unsubscribeNode(this);\n    this._children.forEach((child) => child.dispose());\n  }\n\n  removeChild(child: Node<unknown>) {\n    const index = this._children.indexOf(child as JsiNode<unknown>);\n    if (index !== -1) {\n      const [node] = this._children.splice(index, 1);\n      node.dispose();\n    }\n  }\n\n  insertChildBefore(child: Node<unknown>, before: Node<unknown>) {\n    const index = this._children.indexOf(child as JsiNode<unknown>);\n    if (index !== -1) {\n      this._children.splice(index, 1);\n    }\n    const beforeIndex = this._children.indexOf(before as JsiNode<unknown>);\n    this._children.splice(beforeIndex, 0, child as JsiNode<unknown>);\n  }\n}\n\nexport type Invalidate = () => void;\n\nexport abstract class JsiDeclarationNode<P>\n  extends JsiNode<P>\n  implements DeclarationNode<P>\n{\n  private invalidate: Invalidate = () => {};\n\n  constructor(\n    ctx: NodeContext,\n    public declarationType: DeclarationType,\n    type: NodeType,\n    props: P\n  ) {\n    super(ctx, type, props);\n  }\n\n  abstract decorate(ctx: DeclarationContext): void;\n\n  protected decorateChildren(ctx: DeclarationContext) {\n    this.children().forEach((child) => {\n      if (child instanceof JsiDeclarationNode) {\n        child.decorate(ctx);\n      }\n    });\n  }\n\n  addChild(child: Node<unknown>): void {\n    if (!(child instanceof JsiDeclarationNode)) {\n      throw new Error(`Cannot add child of type ${child.type} to ${this.type}`);\n    }\n    super.addChild(child);\n    this.invalidate();\n  }\n\n  insertChildBefore(child: Node<unknown>, before: Node<unknown>): void {\n    if (!(child instanceof JsiDeclarationNode)) {\n      throw new Error(`Cannot add child of type ${child.type} to ${this.type}`);\n    }\n    super.insertChildBefore(child, before);\n    this.invalidate();\n  }\n\n  dispose() {\n    this.invalidate();\n    super.dispose();\n  }\n\n  setInvalidate(invalidate: Invalidate) {\n    this.invalidate = invalidate;\n  }\n\n  setProps(props: P) {\n    super.setProps(props);\n    this.invalidate();\n  }\n\n  setProp<K extends keyof P>(name: K, v: P[K]) {\n    const hasChanged = super.setProp(name, v);\n    if (hasChanged) {\n      this.invalidate();\n    }\n    return hasChanged;\n  }\n}\n"],"mappings":"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"}

package/lib/module/dom/nodes/PaintContext.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["PaintContext.ts"],"sourcesContent":["import type {\n  BlendMode,\n  PaintStyle,\n  SkColorFilter,\n  SkImageFilter,\n  SkMaskFilter,\n  SkPathEffect,\n  SkShader,\n  StrokeCap,\n  StrokeJoin,\n} from \"../../skia/types\";\nimport type { SkColor } from \"../../skia/types/Color\";\n\nexport interface PaintContext {\n  color?: SkColor;\n  strokeWidth?: number;\n  blendMode?: BlendMode;\n  style?: PaintStyle;\n  strokeJoin?: StrokeJoin;\n  strokeCap?: StrokeCap;\n  strokeMiter?: number;\n  opacity?: number;\n  antiAlias?: boolean;\n\n  shader?: SkShader;\n  colorFilter?: SkColorFilter;\n  imageFilter?: SkImageFilter;\n  maskFilter?: SkMaskFilter;\n  pathEffect?: SkPathEffect;\n}\n"],"mappings":""}
+{"version":3,"names":[],"sources":["PaintContext.ts"],"sourcesContent":["import type {\n  BlendMode,\n  PaintStyle,\n  SkColorFilter,\n  SkImageFilter,\n  SkMaskFilter,\n  SkPathEffect,\n  SkShader,\n  StrokeCap,\n  StrokeJoin,\n} from \"../../skia/types\";\nimport type { SkColor } from \"../../skia/types/Color\";\n\n// TODO: to remove\nexport interface PaintContext {\n  color?: SkColor;\n  strokeWidth?: number;\n  blendMode?: BlendMode;\n  style?: PaintStyle;\n  strokeJoin?: StrokeJoin;\n  strokeCap?: StrokeCap;\n  strokeMiter?: number;\n  opacity?: number;\n  antiAlias?: boolean;\n\n  shader?: SkShader;\n  colorFilter?: SkColorFilter;\n  imageFilter?: SkImageFilter;\n  maskFilter?: SkMaskFilter;\n  pathEffect?: SkPathEffect;\n}\n"],"mappings":""}

package/lib/module/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;
 }