@shopify/react-native-skia 0.1.136 → 0.1.139

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

@@ -19,6 +19,8 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 
 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; }
 
+const pd = _reactNative.PixelRatio.get();
+
 class SkiaView extends _react.default.Component {
   constructor(props) {
     var _props$mode;
@@ -39,12 +41,12 @@ class SkiaView extends _react.default.Component {
 
     _defineProperty(this, "_redrawRequests", 0);
 
-    _defineProperty(this, "_unmounted", false);
+    _defineProperty(this, "width", 0);
+
+    _defineProperty(this, "height", 0);
+
+    _defineProperty(this, "requestId", 0);
 
-    this.state = {
-      width: -1,
-      height: -1
-    };
     this._mode = (_props$mode = props.mode) !== null && _props$mode !== void 0 ? _props$mode : "default";
   }
 
@@ -55,33 +57,44 @@ class SkiaView extends _react.default.Component {
   }
 
   onLayout(evt) {
-    this.setState({
-      width: evt.nativeEvent.layout.width,
-      height: evt.nativeEvent.layout.height
-    }, () => {
-      // Reset canvas / surface on layout change
-      if (this._canvasRef.current) {
-        // Create surface
-        this._surface = new _JsiSkSurface.JsiSkSurface(global.CanvasKit, global.CanvasKit.MakeWebGLCanvasSurface(this._canvasRef.current)); // Get canvas and repaint
-
-        if (this._surface) {
-          this._canvas = this._surface.getCanvas();
-          this.requestRedraw();
-        }
+    const {
+      CanvasKit
+    } = global;
+    const {
+      width,
+      height
+    } = evt.nativeEvent.layout;
+    this.width = width;
+    this.height = height; // Reset canvas / surface on layout change
+
+    if (this._canvasRef.current) {
+      const canvas = this._canvasRef.current;
+      canvas.width = canvas.clientWidth * pd;
+      canvas.height = canvas.clientHeight * pd;
+      const surface = CanvasKit.MakeWebGLCanvasSurface(this._canvasRef.current);
+
+      if (!surface) {
+        throw new Error("Could not create surface");
       }
-    });
+
+      this._surface = new _JsiSkSurface.JsiSkSurface(CanvasKit, surface);
+      this._canvas = this._surface.getCanvas();
+      this.redraw();
+    }
   }
 
   componentDidMount() {
     // Start render loop
+    this.tick();
+  }
+
+  componentDidUpdate() {
     this.redraw();
   }
 
   componentWillUnmount() {
     this.unsubscribeAll();
-    this._surface = null;
-    this._canvas = null;
-    this._unmounted = true;
+    cancelAnimationFrame(this.requestId);
   }
   /**
    * Creates a snapshot from the canvas in the surface
@@ -100,33 +113,38 @@ class SkiaView extends _react.default.Component {
    */
 
 
-  redraw() {
+  tick() {
     if (this._mode === "continuous" || this._redrawRequests > 0) {
       this._redrawRequests = 0;
 
-      if (this._canvas && this.props.onDraw && this.state.height !== -1 && this.state.width !== -1) {
+      if (this._canvas && this.props.onDraw) {
         var _this$_surface2;
 
         const touches = [...this._touches];
         this._touches = [];
         const info = {
-          height: this.state.height,
-          width: this.state.width,
+          height: this.height,
+          width: this.width,
           timestamp: Date.now(),
-          touches: [touches]
+          touches: touches.map(t => [t])
         };
-        this.props.onDraw && this.props.onDraw(this._canvas, info);
-        (_this$_surface2 = this._surface) === null || _this$_surface2 === void 0 ? void 0 : _this$_surface2.ref.flush();
-      }
-    } // Always request a new redraw as long as we're not unmounted
 
+        if (this.props.onDraw) {
+          const canvas = this._canvas;
+          canvas.save();
+          canvas.scale(pd, pd);
+          this.props.onDraw(canvas, info);
+          canvas.restore();
+        }
 
-    if (!this._unmounted) {
-      requestAnimationFrame(this.redraw.bind(this));
+        (_this$_surface2 = this._surface) === null || _this$_surface2 === void 0 ? void 0 : _this$_surface2.ref.flush();
+      }
     }
+
+    this.requestId = requestAnimationFrame(this.tick.bind(this));
   }
 
-  requestRedraw() {
+  redraw() {
     this._redrawRequests++;
   }
   /**
@@ -142,7 +160,7 @@ class SkiaView extends _react.default.Component {
 
   setDrawMode(mode) {
     this._mode = mode;
-    this.redraw();
+    this.tick();
   }
   /**
    * Registers one or move values as a dependant value of the Skia View. The view will
@@ -157,7 +175,7 @@ class SkiaView extends _react.default.Component {
 
     _values.forEach(v => {
       this._unsubscriptions.push(v.addListener(() => {
-        this.requestRedraw();
+        this.redraw();
       }));
     });
   }
@@ -172,23 +190,11 @@ class SkiaView extends _react.default.Component {
       timestamp: Date.now()
     });
 
-    this.requestRedraw();
-  }
-
-  handleTouchStart(evt) {
-    this.handleTouchEvent(evt, _types.TouchType.Start);
-  }
-
-  handleTouchMove(evt) {
-    this.handleTouchEvent(evt, _types.TouchType.Active);
-  }
-
-  handleTouchEnd(evt) {
-    this.handleTouchEvent(evt, _types.TouchType.Cancelled);
+    this.redraw();
   }
 
-  handleTouchCancel(evt) {
-    this.handleTouchEvent(evt, _types.TouchType.End);
+  createTouchHandler(touchType) {
+    return evt => this.handleTouchEvent(evt, touchType);
   }
 
   render() {
@@ -201,12 +207,16 @@ class SkiaView extends _react.default.Component {
       onLayout: this.onLayout.bind(this)
     }), /*#__PURE__*/_react.default.createElement("canvas", {
       ref: this._canvasRef,
-      width: this.state.width,
-      height: this.state.height,
-      onPointerDown: this.handleTouchStart.bind(this),
-      onPointerMove: this.handleTouchMove.bind(this),
-      onPointerUp: this.handleTouchEnd.bind(this),
-      onPointerCancel: this.handleTouchCancel.bind(this)
+      style: {
+        display: "flex",
+        flex: 1
+      },
+      onPointerDown: this.createTouchHandler(_types.TouchType.Start),
+      onPointerMove: this.createTouchHandler(_types.TouchType.Active),
+      onPointerUp: this.createTouchHandler(_types.TouchType.End),
+      onPointerCancel: this.createTouchHandler(_types.TouchType.Cancelled),
+      onPointerLeave: this.createTouchHandler(_types.TouchType.End),
+      onPointerOut: this.createTouchHandler(_types.TouchType.End)
     }));
   }
 

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

@@ -1 +1 @@
-{"version":3,"sources":["SkiaView.web.tsx"],"names":["SkiaView","React","Component","constructor","props","createRef","state","width","height","_mode","mode","unsubscribeAll","_unsubscriptions","forEach","u","onLayout","evt","setState","nativeEvent","layout","_canvasRef","current","_surface","JsiSkSurface","global","CanvasKit","MakeWebGLCanvasSurface","_canvas","getCanvas","requestRedraw","componentDidMount","redraw","componentWillUnmount","_unmounted","makeImageSnapshot","rect","_redrawRequests","onDraw","touches","_touches","info","timestamp","Date","now","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","handleTouchStart","TouchType","Start","handleTouchMove","Active","handleTouchEnd","Cancelled","handleTouchCancel","End","render","debug","viewProps"],"mappings":"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","sourcesContent":["/* global HTMLCanvasElement */\nimport React from \"react\";\nimport type { PointerEvent } from \"react\";\nimport type { LayoutChangeEvent } from \"react-native\";\nimport { 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 { DrawingInfo, DrawMode, SkiaViewProps, TouchInfo } from \"./types\";\nimport { TouchType } from \"./types\";\n\nexport class SkiaView extends React.Component<\n  SkiaViewProps,\n  { width: number; height: number }\n> {\n  constructor(props: SkiaViewProps) {\n    super(props);\n    this.state = { width: -1, height: -1 };\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.RefObject<HTMLCanvasElement> = React.createRef();\n  private _mode: DrawMode;\n  private _redrawRequests = 0;\n  private _unmounted = false;\n\n  private unsubscribeAll() {\n    this._unsubscriptions.forEach((u) => u());\n    this._unsubscriptions = [];\n  }\n\n  private onLayout(evt: LayoutChangeEvent) {\n    this.setState(\n      {\n        width: evt.nativeEvent.layout.width,\n        height: evt.nativeEvent.layout.height,\n      },\n      () => {\n        // Reset canvas / surface on layout change\n        if (this._canvasRef.current) {\n          // Create surface\n          this._surface = new JsiSkSurface(\n            global.CanvasKit,\n            global.CanvasKit.MakeWebGLCanvasSurface(this._canvasRef.current)!\n          );\n          // Get canvas and repaint\n          if (this._surface) {\n            this._canvas = this._surface.getCanvas();\n            this.requestRedraw();\n          }\n        }\n      }\n    );\n  }\n\n  componentDidMount() {\n    // Start render loop\n    this.redraw();\n  }\n\n  componentWillUnmount() {\n    this.unsubscribeAll();\n    this._surface = null;\n    this._canvas = null;\n    this._unmounted = true;\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   * Sends a redraw request to the native SkiaView.\n   */\n  private redraw() {\n    if (this._mode === \"continuous\" || this._redrawRequests > 0) {\n      this._redrawRequests = 0;\n      if (\n        this._canvas &&\n        this.props.onDraw &&\n        this.state.height !== -1 &&\n        this.state.width !== -1\n      ) {\n        const touches = [...this._touches];\n        this._touches = [];\n        const info: DrawingInfo = {\n          height: this.state.height,\n          width: this.state.width,\n          timestamp: Date.now(),\n          touches: [touches],\n        };\n        this.props.onDraw && this.props.onDraw(this._canvas!, info);\n        this._surface?.ref.flush();\n      }\n    }\n    // Always request a new redraw as long as we're not unmounted\n    if (!this._unmounted) {\n      requestAnimationFrame(this.redraw.bind(this));\n    }\n  }\n\n  public requestRedraw() {\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.redraw();\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.requestRedraw();\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.requestRedraw();\n  }\n\n  handleTouchStart(evt: PointerEvent) {\n    this.handleTouchEvent(evt, TouchType.Start);\n  }\n\n  handleTouchMove(evt: PointerEvent) {\n    this.handleTouchEvent(evt, TouchType.Active);\n  }\n\n  handleTouchEnd(evt: PointerEvent) {\n    this.handleTouchEvent(evt, TouchType.Cancelled);\n  }\n\n  handleTouchCancel(evt: PointerEvent) {\n    this.handleTouchEvent(evt, TouchType.End);\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          width={this.state.width}\n          height={this.state.height}\n          onPointerDown={this.handleTouchStart.bind(this)}\n          onPointerMove={this.handleTouchMove.bind(this)}\n          onPointerUp={this.handleTouchEnd.bind(this)}\n          onPointerCancel={this.handleTouchCancel.bind(this)}\n        />\n      </View>\n    );\n  }\n}\n"]}
+{"version":3,"sources":["SkiaView.web.tsx"],"names":["pd","PixelRatio","get","SkiaView","React","Component","constructor","props","createRef","_mode","mode","unsubscribeAll","_unsubscriptions","forEach","u","onLayout","evt","CanvasKit","global","width","height","nativeEvent","layout","_canvasRef","current","canvas","clientWidth","clientHeight","surface","MakeWebGLCanvasSurface","Error","_surface","JsiSkSurface","_canvas","getCanvas","redraw","componentDidMount","tick","componentDidUpdate","componentWillUnmount","cancelAnimationFrame","requestId","makeImageSnapshot","rect","_redrawRequests","onDraw","touches","_touches","info","timestamp","Date","now","map","t","save","scale","restore","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","createTouchHandler","render","debug","viewProps","display","flex","TouchType","Start","Active","End","Cancelled"],"mappings":"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","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 { DrawingInfo, DrawMode, SkiaViewProps, TouchInfo } from \"./types\";\nimport { TouchType } from \"./types\";\n\nconst pd = PixelRatio.get();\n\nexport class SkiaView extends React.Component<SkiaViewProps> {\n  constructor(props: SkiaViewProps) {\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 width = 0;\n  private height = 0;\n  private requestId = 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 = canvas.clientWidth * pd;\n      canvas.height = canvas.clientHeight * 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  }\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   * 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 && this.props.onDraw) {\n        const touches = [...this._touches];\n        this._touches = [];\n        const info: DrawingInfo = {\n          height: this.height,\n          width: this.width,\n          timestamp: Date.now(),\n          touches: touches.map((t) => [t]),\n        };\n        if (this.props.onDraw) {\n          const canvas = this._canvas!;\n          canvas.save();\n          canvas.scale(pd, pd);\n          this.props.onDraw(canvas, info);\n          canvas.restore();\n        }\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"]}

package/lib/commonjs/web/LoadSkiaWeb.js

@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.LoadSkiaWeb = exports.LoadSkia = void 0;
+
+var _canvaskit = _interopRequireDefault(require("canvaskit-wasm/bin/full/canvaskit"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-expect-error
+const LoadSkiaWeb = async opts => {
+  if (global.CanvasKit !== undefined) {
+    return;
+  }
+
+  const CanvasKit = await (0, _canvaskit.default)(opts); // The CanvasKit API is stored on the global object and used
+  // to create the JsiSKApi in the Skia.web.ts file.
+
+  global.CanvasKit = CanvasKit;
+}; // We keep this function for backward compatibility
+
+
+exports.LoadSkiaWeb = LoadSkiaWeb;
+const LoadSkia = LoadSkiaWeb;
+exports.LoadSkia = LoadSkia;
+//# sourceMappingURL=LoadSkiaWeb.js.map

package/lib/commonjs/web/LoadSkiaWeb.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["LoadSkiaWeb.tsx"],"names":["LoadSkiaWeb","opts","global","CanvasKit","undefined","LoadSkia"],"mappings":";;;;;;;AAEA;;;;AAFA;AACA;AAWO,MAAMA,WAAW,GAAG,MAAOC,IAAP,IAAuC;AAChE,MAAIC,MAAM,CAACC,SAAP,KAAqBC,SAAzB,EAAoC;AAClC;AACD;;AACD,QAAMD,SAAS,GAAG,MAAM,wBAAcF,IAAd,CAAxB,CAJgE,CAKhE;AACA;;AACAC,EAAAA,MAAM,CAACC,SAAP,GAAmBA,SAAnB;AACD,CARM,C,CAUP;;;;AACO,MAAME,QAAQ,GAAGL,WAAjB","sourcesContent":["// eslint-disable-next-line @typescript-eslint/ban-ts-comment\n// @ts-expect-error\nimport CanvasKitInit from \"canvaskit-wasm/bin/full/canvaskit\";\nimport type {\n  CanvasKit as CanvasKitType,\n  CanvasKitInitOptions,\n} from \"canvaskit-wasm\";\n\ndeclare global {\n  var CanvasKit: CanvasKitType;\n}\n\nexport const LoadSkiaWeb = async (opts?: CanvasKitInitOptions) => {\n  if (global.CanvasKit !== undefined) {\n    return;\n  }\n  const CanvasKit = await CanvasKitInit(opts);\n  // The CanvasKit API is stored on the global object and used\n  // to create the JsiSKApi in the Skia.web.ts file.\n  global.CanvasKit = CanvasKit;\n};\n\n// We keep this function for backward compatibility\nexport const LoadSkia = LoadSkiaWeb;\n"]}

package/lib/commonjs/web/WithSkiaWeb.js

@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.WithSkiaWeb = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _reactNative = require("react-native");
+
+var _LoadSkiaWeb = require("./LoadSkiaWeb");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+const WithSkiaWeb = _ref => {
+  let {
+    getComponent,
+    fallback,
+    opts
+  } = _ref;
+  const Inner = (0, _react.useMemo)(() => /*#__PURE__*/(0, _react.lazy)(async () => {
+    if (_reactNative.Platform.OS === "web") {
+      await (0, _LoadSkiaWeb.LoadSkiaWeb)(opts);
+    } else {
+      console.warn("<WithSkiaWeb /> is only necessary on web. Consider not using on native.");
+    }
+
+    return getComponent();
+  }), [getComponent, opts]);
+  return /*#__PURE__*/_react.default.createElement(_react.Suspense, {
+    fallback: fallback !== null && fallback !== void 0 ? fallback : null
+  }, /*#__PURE__*/_react.default.createElement(Inner, null));
+};
+
+exports.WithSkiaWeb = WithSkiaWeb;
+//# sourceMappingURL=WithSkiaWeb.js.map

package/lib/commonjs/web/WithSkiaWeb.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["WithSkiaWeb.tsx"],"names":["WithSkiaWeb","getComponent","fallback","opts","Inner","Platform","OS","console","warn"],"mappings":";;;;;;;AACA;;AACA;;AAEA;;;;;;AAQO,MAAMA,WAAW,GAAG,QAIN;AAAA,MAJO;AAC1BC,IAAAA,YAD0B;AAE1BC,IAAAA,QAF0B;AAG1BC,IAAAA;AAH0B,GAIP;AACnB,QAAMC,KAAK,GAAG,oBACZ,mBACE,iBAAK,YAAY;AACf,QAAIC,sBAASC,EAAT,KAAgB,KAApB,EAA2B;AACzB,YAAM,8BAAYH,IAAZ,CAAN;AACD,KAFD,MAEO;AACLI,MAAAA,OAAO,CAACC,IAAR,CACE,yEADF;AAGD;;AACD,WAAOP,YAAY,EAAnB;AACD,GATD,CAFU,EAYZ,CAACA,YAAD,EAAeE,IAAf,CAZY,CAAd;AAcA,sBACE,6BAAC,eAAD;AAAU,IAAA,QAAQ,EAAED,QAAF,aAAEA,QAAF,cAAEA,QAAF,GAAc;AAAhC,kBACE,6BAAC,KAAD,OADF,CADF;AAKD,CAxBM","sourcesContent":["import type { ComponentProps, ComponentType } from \"react\";\nimport React, { useMemo, lazy, Suspense } from \"react\";\nimport { Platform } from \"react-native\";\n\nimport { LoadSkiaWeb } from \"./LoadSkiaWeb\";\n\ninterface WithSkiaProps {\n  fallback?: ComponentProps<typeof Suspense>[\"fallback\"];\n  getComponent: () => Promise<{ default: ComponentType }>;\n  opts?: Parameters<typeof LoadSkiaWeb>[0];\n}\n\nexport const WithSkiaWeb = ({\n  getComponent,\n  fallback,\n  opts,\n}: WithSkiaProps) => {\n  const Inner = useMemo(\n    () =>\n      lazy(async () => {\n        if (Platform.OS === \"web\") {\n          await LoadSkiaWeb(opts);\n        } else {\n          console.warn(\n            \"<WithSkiaWeb /> is only necessary on web. Consider not using on native.\"\n          );\n        }\n        return getComponent();\n      }),\n    [getComponent, opts]\n  );\n  return (\n    <Suspense fallback={fallback ?? null}>\n      <Inner />\n    </Suspense>\n  );\n};\n"]}

package/lib/commonjs/web/index.js

@@ -3,20 +3,30 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.LoadSkia = void 0;
 
-var _canvaskit = _interopRequireDefault(require("canvaskit-wasm/bin/full/canvaskit"));
+var _LoadSkiaWeb = require("./LoadSkiaWeb");
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-expect-error
-const LoadSkia = async () => {
-  const CanvasKit = await (0, _canvaskit.default)(); // The CanvasKit API is stored on the global object and used
-  // to create the JsiSKApi in the Skia.web.ts file.
+Object.keys(_LoadSkiaWeb).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _LoadSkiaWeb[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _LoadSkiaWeb[key];
+    }
+  });
+});
 
-  global.CanvasKit = CanvasKit;
-};
+var _WithSkiaWeb = require("./WithSkiaWeb");
 
-exports.LoadSkia = LoadSkia;
+Object.keys(_WithSkiaWeb).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _WithSkiaWeb[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _WithSkiaWeb[key];
+    }
+  });
+});
 //# sourceMappingURL=index.js.map

package/lib/commonjs/web/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.ts"],"names":["LoadSkia","CanvasKit","global"],"mappings":";;;;;;;AAEA;;;;AAFA;AACA;AAQO,MAAMA,QAAQ,GAAG,YAAY;AAClC,QAAMC,SAAS,GAAG,MAAM,yBAAxB,CADkC,CAElC;AACA;;AACAC,EAAAA,MAAM,CAACD,SAAP,GAAmBA,SAAnB;AACD,CALM","sourcesContent":["// eslint-disable-next-line @typescript-eslint/ban-ts-comment\n// @ts-expect-error\nimport CanvasKitInit from \"canvaskit-wasm/bin/full/canvaskit\";\nimport type { CanvasKit as CanvasKitType } from \"canvaskit-wasm\";\n\ndeclare global {\n  var CanvasKit: CanvasKitType;\n}\n\nexport const LoadSkia = async () => {\n  const CanvasKit = await CanvasKitInit();\n  // The CanvasKit API is stored on the global object and used\n  // to create the JsiSKApi in the Skia.web.ts file.\n  global.CanvasKit = CanvasKit;\n};\n"]}
+{"version":3,"sources":["index.ts"],"names":[],"mappings":";;;;;;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA","sourcesContent":["export * from \"./LoadSkiaWeb\";\nexport * from \"./WithSkiaWeb\";\n"]}

package/lib/module/mock/index.js

@@ -45,12 +45,8 @@ export const Mock = {
   useFont: Noop,
   useTypeface: Noop,
   useImage: Noop,
-  usePath: Noop,
   useSVG: Noop,
-  useTextPath: Noop,
-  usePaint: Noop,
   usePicture: Noop,
-  useSvgPath: Noop,
   // 3. Point/Rect/Transform utilities
   vec,
   rect: (x, y, width, height) => ({

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

@@ -1 +1 @@
-{"version":3,"sources":["index.ts"],"names":["Values","ValuesHooks","BaseSkia","useSharedValueEffect","timingFunctions","springFunctions","decayFunctions","interpolateFn","interpolatePathFn","interpolateVectorFn","ShaderLib","Stub","constructor","Proxy","get","apply","set","Noop","Skia","vec","x","y","Mock","useDataCollection","useRawData","useData","useFont","useTypeface","useImage","usePath","useSVG","useTextPath","usePaint","usePicture","useSvgPath","rect","width","height","rrect","r","rx","ry","point","add","a","b","sub","neg","dist","Math","hypot","translate","translateX","translateY","bounds","topLeft","topRight","bottomLeft","bottomRight","center","processTransform2d","interpolateColors","_value","_inputRange","_outputRange","Float32Array","of","mixColors","_v","_x","_y","createDrawing","createDeclaration"],"mappings":"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","sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\n\nimport type { Color, Skia as SkiaApi, SkRect, Vector } from \"../skia/types\";\nimport * as Values from \"../values/web\";\nimport * as ValuesHooks from \"../values/hooks\";\nimport * as BaseSkia from \"../skia/types\";\nimport type * as SkiaExports from \"../skia\";\nimport type * as ExternalExports from \"../external\";\nimport type * as ValueExports from \"../values\";\nimport type * as AnimationExports from \"../animation\";\nimport { useSharedValueEffect } from \"../external/reanimated/useSharedValueEffect\";\nimport * as timingFunctions from \"../animation/timing\";\nimport * as springFunctions from \"../animation/spring\";\nimport * as decayFunctions from \"../animation/decay\";\nimport * as interpolateFn from \"../animation/functions/interpolate\";\nimport * as interpolatePathFn from \"../animation/functions/interpolatePaths\";\nimport * as interpolateVectorFn from \"../animation/functions/interpolateVector\";\nimport { ShaderLib } from \"../renderer/components/shaders/ShaderLib\";\n\nclass Stub {\n  constructor() {\n    return new Proxy(() => {}, {\n      get: () => new Stub(),\n      apply: () => new Stub(),\n      set: () => true,\n    });\n  }\n}\n\nconst Noop: () => any = () => {};\n\nexport const Skia: SkiaApi = new Stub() as any;\n\nexport const vec = (x?: number, y?: number) => ({ x: x ?? 0, y: y ?? x ?? 0 });\n\nexport const Mock: typeof SkiaExports &\n  typeof ExternalExports &\n  typeof ValueExports &\n  typeof AnimationExports & {\n    createDrawing: () => any;\n    createDeclaration: () => any;\n    ShaderLib: typeof ShaderLib;\n  } = {\n  // SkiaExports\n  // 1. Skia API. BaseSkia contains the enums, and functions like isPaint etc\n  Skia,\n  ...BaseSkia,\n  // 2. Hooks\n  useDataCollection: Noop,\n  useRawData: Noop,\n  useData: Noop,\n  useFont: Noop,\n  useTypeface: Noop,\n  useImage: Noop,\n  usePath: Noop,\n  useSVG: Noop,\n  useTextPath: Noop,\n  usePaint: Noop,\n  usePicture: Noop,\n  useSvgPath: Noop,\n  // 3. Point/Rect/Transform utilities\n  vec,\n  rect: (x: number, y: number, width: number, height: number) => ({\n    x,\n    y,\n    width,\n    height,\n  }),\n  rrect: (r: SkRect, rx: number, ry: number) => ({\n    rect: r,\n    rx,\n    ry,\n  }),\n  point: vec,\n  add: (a: Vector, b: Vector) => vec(a.x + b.x, a.y + b.y),\n  sub: (a: Vector, b: Vector) => vec(a.x - b.x, a.y - b.y),\n  neg: (a: Vector) => vec(-a.x, -a.y),\n  dist: (a: Vector, b: Vector) => Math.hypot(a.x - b.x, a.y - b.y),\n  translate: ({ x, y }: Vector) =>\n    [{ translateX: x }, { translateY: y }] as const,\n\n  bounds: Noop,\n  topLeft: Noop,\n  topRight: Noop,\n  bottomLeft: Noop,\n  bottomRight: Noop,\n  center: Noop,\n  processTransform2d: Noop,\n  // ExternalExports\n  useSharedValueEffect,\n  // ValueExports\n  ...Values,\n  ...ValuesHooks,\n  // Animations\n  ...timingFunctions,\n  ...springFunctions,\n  ...decayFunctions,\n  ...interpolateFn,\n  ...interpolatePathFn,\n  ...interpolateVectorFn,\n  interpolateColors: (\n    _value: number,\n    _inputRange: number[],\n    _outputRange: Color[]\n  ) => Float32Array.of(0, 0, 0, 0),\n  mixColors: (_v: number, _x: Color, _y: Color) => Float32Array.of(0, 0, 0, 0),\n  ShaderLib,\n  createDrawing: Noop,\n  createDeclaration: Noop,\n};\n"]}
+{"version":3,"sources":["index.ts"],"names":["Values","ValuesHooks","BaseSkia","useSharedValueEffect","timingFunctions","springFunctions","decayFunctions","interpolateFn","interpolatePathFn","interpolateVectorFn","ShaderLib","Stub","constructor","Proxy","get","apply","set","Noop","Skia","vec","x","y","Mock","useDataCollection","useRawData","useData","useFont","useTypeface","useImage","useSVG","usePicture","rect","width","height","rrect","r","rx","ry","point","add","a","b","sub","neg","dist","Math","hypot","translate","translateX","translateY","bounds","topLeft","topRight","bottomLeft","bottomRight","center","processTransform2d","interpolateColors","_value","_inputRange","_outputRange","Float32Array","of","mixColors","_v","_x","_y","createDrawing","createDeclaration"],"mappings":"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","sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\n\nimport type { Color, Skia as SkiaApi, SkRect, Vector } from \"../skia/types\";\nimport * as Values from \"../values/web\";\nimport * as ValuesHooks from \"../values/hooks\";\nimport * as BaseSkia from \"../skia/types\";\nimport type * as SkiaExports from \"../skia\";\nimport type * as ExternalExports from \"../external\";\nimport type * as ValueExports from \"../values\";\nimport type * as AnimationExports from \"../animation\";\nimport { useSharedValueEffect } from \"../external/reanimated/useSharedValueEffect\";\nimport * as timingFunctions from \"../animation/timing\";\nimport * as springFunctions from \"../animation/spring\";\nimport * as decayFunctions from \"../animation/decay\";\nimport * as interpolateFn from \"../animation/functions/interpolate\";\nimport * as interpolatePathFn from \"../animation/functions/interpolatePaths\";\nimport * as interpolateVectorFn from \"../animation/functions/interpolateVector\";\nimport { ShaderLib } from \"../renderer/components/shaders/ShaderLib\";\n\nclass Stub {\n  constructor() {\n    return new Proxy(() => {}, {\n      get: () => new Stub(),\n      apply: () => new Stub(),\n      set: () => true,\n    });\n  }\n}\n\nconst Noop: () => any = () => {};\n\nexport const Skia: SkiaApi = new Stub() as any;\n\nexport const vec = (x?: number, y?: number) => ({ x: x ?? 0, y: y ?? x ?? 0 });\n\nexport const Mock: typeof SkiaExports &\n  typeof ExternalExports &\n  typeof ValueExports &\n  typeof AnimationExports & {\n    createDrawing: () => any;\n    createDeclaration: () => any;\n    ShaderLib: typeof ShaderLib;\n  } = {\n  // SkiaExports\n  // 1. Skia API. BaseSkia contains the enums, and functions like isPaint etc\n  Skia,\n  ...BaseSkia,\n  // 2. Hooks\n  useDataCollection: Noop,\n  useRawData: Noop,\n  useData: Noop,\n  useFont: Noop,\n  useTypeface: Noop,\n  useImage: Noop,\n  useSVG: Noop,\n  usePicture: Noop,\n  // 3. Point/Rect/Transform utilities\n  vec,\n  rect: (x: number, y: number, width: number, height: number) => ({\n    x,\n    y,\n    width,\n    height,\n  }),\n  rrect: (r: SkRect, rx: number, ry: number) => ({\n    rect: r,\n    rx,\n    ry,\n  }),\n  point: vec,\n  add: (a: Vector, b: Vector) => vec(a.x + b.x, a.y + b.y),\n  sub: (a: Vector, b: Vector) => vec(a.x - b.x, a.y - b.y),\n  neg: (a: Vector) => vec(-a.x, -a.y),\n  dist: (a: Vector, b: Vector) => Math.hypot(a.x - b.x, a.y - b.y),\n  translate: ({ x, y }: Vector) =>\n    [{ translateX: x }, { translateY: y }] as const,\n\n  bounds: Noop,\n  topLeft: Noop,\n  topRight: Noop,\n  bottomLeft: Noop,\n  bottomRight: Noop,\n  center: Noop,\n  processTransform2d: Noop,\n  // ExternalExports\n  useSharedValueEffect,\n  // ValueExports\n  ...Values,\n  ...ValuesHooks,\n  // Animations\n  ...timingFunctions,\n  ...springFunctions,\n  ...decayFunctions,\n  ...interpolateFn,\n  ...interpolatePathFn,\n  ...interpolateVectorFn,\n  interpolateColors: (\n    _value: number,\n    _inputRange: number[],\n    _outputRange: Color[]\n  ) => Float32Array.of(0, 0, 0, 0),\n  mixColors: (_v: number, _x: Color, _y: Color) => Float32Array.of(0, 0, 0, 0),\n  ShaderLib,\n  createDrawing: Noop,\n  createDeclaration: Noop,\n};\n"]}

package/lib/module/renderer/Canvas.js

@@ -23,15 +23,13 @@ const render = (element, root, container) => {
 };
 
 export const useCanvasRef = () => useRef(null);
-const defaultFontMgr = Skia.FontMgr.RefDefault();
 export const Canvas = /*#__PURE__*/forwardRef((_ref, forwardedRef) => {
   let {
     children,
     style,
     debug,
     mode,
-    onTouch,
-    fontMgr
+    onTouch
   } = _ref;
   const size = useValue({
     width: 0,
@@ -83,16 +81,17 @@ export const Canvas = /*#__PURE__*/forwardRef((_ref, forwardedRef) => {
       opacity: 1,
       ref,
       center: Skia.Point(width / 2, height / 2),
-      fontMgr: fontMgr !== null && fontMgr !== void 0 ? fontMgr : defaultFontMgr,
       Skia
     };
     container.draw(ctx);
   }, [tick, onTouch]);
   useEffect(() => {
     return () => {
-      container.depMgr.unsubscribe();
+      skiaReconciler.updateContainer(null, root, null, () => {
+        container.depMgr.unsubscribe();
+      });
     };
-  }, [container]);
+  }, [container, root]);
   return /*#__PURE__*/React.createElement(SkiaView, {
     ref: ref,
     style: style,

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

@@ -1 +1 @@
-{"version":3,"sources":["Canvas.tsx"],"names":["React","useEffect","useState","useCallback","useMemo","forwardRef","useRef","ReactReconciler","SkiaView","useDrawCallback","useValue","Skia","debug","hostDebug","skHostConfig","Container","DependencyManager","CanvasProvider","skiaReconciler","injectIntoDevTools","bundleType","version","rendererPackageName","render","element","root","container","updateContainer","depMgr","subscribe","useCanvasRef","defaultFontMgr","FontMgr","RefDefault","Canvas","forwardedRef","children","style","mode","onTouch","fontMgr","size","width","height","canvasCtx","innerRef","ref","useCombinedRefs","tick","setTick","redraw","t","createContainer","onDraw","canvas","info","timestamp","touches","current","paint","Paint","ctx","opacity","center","Point","draw","unsubscribe","refs","targetRef","forEach"],"mappings":"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","sourcesContent":["import React, {\n  useEffect,\n  useState,\n  useCallback,\n  useMemo,\n  forwardRef,\n  useRef,\n} from \"react\";\nimport type {\n  RefObject,\n  ReactNode,\n  ComponentProps,\n  MutableRefObject,\n  ForwardedRef,\n} from \"react\";\nimport type { OpaqueRoot } from \"react-reconciler\";\nimport ReactReconciler from \"react-reconciler\";\n\nimport { SkiaView, useDrawCallback } from \"../views\";\nimport type { TouchHandler } from \"../views\";\nimport type { SkFontMgr } from \"../skia/types\";\nimport { useValue } from \"../values/hooks/useValue\";\nimport { Skia } from \"../skia/Skia\";\n\nimport { debug as hostDebug, skHostConfig } from \"./HostConfig\";\n// import { debugTree } from \"./nodes\";\nimport { Container } from \"./nodes\";\nimport { DependencyManager } from \"./DependencyManager\";\nimport { CanvasProvider } from \"./useCanvas\";\n\nexport const skiaReconciler = ReactReconciler(skHostConfig);\n\nskiaReconciler.injectIntoDevTools({\n  bundleType: 1,\n  version: \"0.0.1\",\n  rendererPackageName: \"react-native-skia\",\n});\n\nconst render = (element: ReactNode, root: OpaqueRoot, container: Container) => {\n  skiaReconciler.updateContainer(element, root, null, () => {\n    hostDebug(\"updateContainer\");\n\n    container.depMgr.subscribe();\n  });\n};\n\nexport const useCanvasRef = () => useRef<SkiaView>(null);\n\nexport interface CanvasProps extends ComponentProps<typeof SkiaView> {\n  ref?: RefObject<SkiaView>;\n  children: ReactNode;\n  onTouch?: TouchHandler;\n  fontMgr?: SkFontMgr;\n}\n\nconst defaultFontMgr = Skia.FontMgr.RefDefault();\n\nexport const Canvas = forwardRef<SkiaView, CanvasProps>(\n  ({ children, style, debug, mode, onTouch, fontMgr }, forwardedRef) => {\n    const size = useValue({ width: 0, height: 0 });\n    const canvasCtx = useMemo(() => ({ Skia, size }), [size]);\n    const innerRef = useCanvasRef();\n    const ref = useCombinedRefs(forwardedRef, innerRef);\n    const [tick, setTick] = useState(0);\n    const redraw = useCallback(() => setTick((t) => t + 1), []);\n\n    const container = useMemo(\n      () => new Container(new DependencyManager(ref), redraw),\n      [redraw, ref]\n    );\n\n    const root = useMemo(\n      () => skiaReconciler.createContainer(container, 0, false, null),\n      [container]\n    );\n    // Render effect\n    useEffect(() => {\n      render(\n        <CanvasProvider value={canvasCtx}>{children}</CanvasProvider>,\n        root,\n        container\n      );\n    }, [children, root, redraw, container, canvasCtx]);\n\n    // Draw callback\n    const onDraw = useDrawCallback(\n      (canvas, info) => {\n        // TODO: if tree is empty (count === 1) maybe we should not render?\n        const { width, height, timestamp } = info;\n        if (onTouch) {\n          onTouch(info.touches);\n        }\n        if (\n          width !== canvasCtx.size.current.width ||\n          height !== canvasCtx.size.current.height\n        ) {\n          canvasCtx.size.current = { width, height };\n        }\n        const paint = Skia.Paint();\n        const ctx = {\n          width,\n          height,\n          timestamp,\n          canvas,\n          paint,\n          opacity: 1,\n          ref,\n          center: Skia.Point(width / 2, height / 2),\n          fontMgr: fontMgr ?? defaultFontMgr,\n          Skia,\n        };\n        container.draw(ctx);\n      },\n      [tick, onTouch]\n    );\n\n    useEffect(() => {\n      return () => {\n        container.depMgr.unsubscribe();\n      };\n    }, [container]);\n\n    return (\n      <SkiaView\n        ref={ref}\n        style={style}\n        onDraw={onDraw}\n        mode={mode}\n        debug={debug}\n      />\n    );\n  }\n);\n\n/**\n * Combines a list of refs into a single ref. This can be used to provide\n * both a forwarded ref and an internal ref keeping the same functionality\n * on both of the refs.\n * @param refs Array of refs to combine\n * @returns A single ref that can be used in a ref prop.\n */\nconst useCombinedRefs = <T,>(\n  ...refs: Array<MutableRefObject<T> | ForwardedRef<T>>\n) => {\n  const targetRef = React.useRef<T>(null);\n  React.useEffect(() => {\n    refs.forEach((ref) => {\n      if (ref) {\n        if (typeof ref === \"function\") {\n          ref(targetRef.current);\n        } else {\n          ref.current = targetRef.current;\n        }\n      }\n    });\n  }, [refs]);\n  return targetRef;\n};\n"]}
+{"version":3,"sources":["Canvas.tsx"],"names":["React","useEffect","useState","useCallback","useMemo","forwardRef","useRef","ReactReconciler","SkiaView","useDrawCallback","useValue","Skia","debug","hostDebug","skHostConfig","Container","DependencyManager","CanvasProvider","skiaReconciler","injectIntoDevTools","bundleType","version","rendererPackageName","render","element","root","container","updateContainer","depMgr","subscribe","useCanvasRef","Canvas","forwardedRef","children","style","mode","onTouch","size","width","height","canvasCtx","innerRef","ref","useCombinedRefs","tick","setTick","redraw","t","createContainer","onDraw","canvas","info","timestamp","touches","current","paint","Paint","ctx","opacity","center","Point","draw","unsubscribe","refs","targetRef","forEach"],"mappings":"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","sourcesContent":["import React, {\n  useEffect,\n  useState,\n  useCallback,\n  useMemo,\n  forwardRef,\n  useRef,\n} from \"react\";\nimport type {\n  RefObject,\n  ReactNode,\n  ComponentProps,\n  MutableRefObject,\n  ForwardedRef,\n} from \"react\";\nimport type { OpaqueRoot } from \"react-reconciler\";\nimport ReactReconciler from \"react-reconciler\";\n\nimport { SkiaView, useDrawCallback } from \"../views\";\nimport type { TouchHandler } from \"../views\";\nimport { useValue } from \"../values/hooks/useValue\";\nimport { Skia } from \"../skia/Skia\";\n\nimport { debug as hostDebug, skHostConfig } from \"./HostConfig\";\n// import { debugTree } from \"./nodes\";\nimport { Container } from \"./nodes\";\nimport { DependencyManager } from \"./DependencyManager\";\nimport { CanvasProvider } from \"./useCanvas\";\n\nexport const skiaReconciler = ReactReconciler(skHostConfig);\n\nskiaReconciler.injectIntoDevTools({\n  bundleType: 1,\n  version: \"0.0.1\",\n  rendererPackageName: \"react-native-skia\",\n});\n\nconst render = (element: ReactNode, root: OpaqueRoot, container: Container) => {\n  skiaReconciler.updateContainer(element, root, null, () => {\n    hostDebug(\"updateContainer\");\n\n    container.depMgr.subscribe();\n  });\n};\n\nexport const useCanvasRef = () => useRef<SkiaView>(null);\n\nexport interface CanvasProps extends ComponentProps<typeof SkiaView> {\n  ref?: RefObject<SkiaView>;\n  children: ReactNode;\n  onTouch?: TouchHandler;\n}\n\nexport const Canvas = forwardRef<SkiaView, CanvasProps>(\n  ({ children, style, debug, mode, onTouch }, forwardedRef) => {\n    const size = useValue({ width: 0, height: 0 });\n    const canvasCtx = useMemo(() => ({ Skia, size }), [size]);\n    const innerRef = useCanvasRef();\n    const ref = useCombinedRefs(forwardedRef, innerRef);\n    const [tick, setTick] = useState(0);\n    const redraw = useCallback(() => setTick((t) => t + 1), []);\n\n    const container = useMemo(\n      () => new Container(new DependencyManager(ref), redraw),\n      [redraw, ref]\n    );\n\n    const root = useMemo(\n      () => skiaReconciler.createContainer(container, 0, false, null),\n      [container]\n    );\n    // Render effect\n    useEffect(() => {\n      render(\n        <CanvasProvider value={canvasCtx}>{children}</CanvasProvider>,\n        root,\n        container\n      );\n    }, [children, root, redraw, container, canvasCtx]);\n\n    // Draw callback\n    const onDraw = useDrawCallback(\n      (canvas, info) => {\n        // TODO: if tree is empty (count === 1) maybe we should not render?\n        const { width, height, timestamp } = info;\n        if (onTouch) {\n          onTouch(info.touches);\n        }\n        if (\n          width !== canvasCtx.size.current.width ||\n          height !== canvasCtx.size.current.height\n        ) {\n          canvasCtx.size.current = { width, height };\n        }\n        const paint = Skia.Paint();\n        const ctx = {\n          width,\n          height,\n          timestamp,\n          canvas,\n          paint,\n          opacity: 1,\n          ref,\n          center: Skia.Point(width / 2, height / 2),\n          Skia,\n        };\n        container.draw(ctx);\n      },\n      [tick, onTouch]\n    );\n\n    useEffect(() => {\n      return () => {\n        skiaReconciler.updateContainer(null, root, null, () => {\n          container.depMgr.unsubscribe();\n        });\n      };\n    }, [container, root]);\n\n    return (\n      <SkiaView\n        ref={ref}\n        style={style}\n        onDraw={onDraw}\n        mode={mode}\n        debug={debug}\n      />\n    );\n  }\n);\n\n/**\n * Combines a list of refs into a single ref. This can be used to provide\n * both a forwarded ref and an internal ref keeping the same functionality\n * on both of the refs.\n * @param refs Array of refs to combine\n * @returns A single ref that can be used in a ref prop.\n */\nconst useCombinedRefs = <T,>(\n  ...refs: Array<MutableRefObject<T> | ForwardedRef<T>>\n) => {\n  const targetRef = React.useRef<T>(null);\n  React.useEffect(() => {\n    refs.forEach((ref) => {\n      if (ref) {\n        if (typeof ref === \"function\") {\n          ref(targetRef.current);\n        } else {\n          ref.current = targetRef.current;\n        }\n      }\n    });\n  }, [refs]);\n  return targetRef;\n};\n"]}

package/lib/module/renderer/components/Group.js

@@ -42,7 +42,7 @@ const onDraw = createDrawing((ctx, _ref, node) => {
       canvas.save();
     }
 
-    processCanvasTransform(ctx, groupProps);
+    processCanvasTransform(canvas, groupProps);
 
     if (clip) {
       const op = invertClip ? ClipOp.Difference : ClipOp.Intersect;

package/lib/module/renderer/components/Group.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Group.tsx"],"names":["React","ClipOp","processCanvasTransform","processPaint","processClip","createDrawing","DrawingNode","isDeclarationNode","isSkPaint","obj","__typename__","onDraw","ctx","node","layer","clip","invertClip","groupProps","canvas","opacity","Skia","declarations","children","filter","map","child","draw","drawings","paint","copy","hasTransform","transform","matrix","hasClip","shouldSave","saveLayer","current","undefined","save","op","Difference","Intersect","visit","restore","Group","props"],"mappings":";;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AAIA,SAASC,MAAT,QAAuB,kBAAvB;AACA,SACEC,sBADF,EAEEC,YAFF,EAGEC,WAHF,QAIO,eAJP;AAWA,SAASC,aAAT,EAAwBC,WAAxB,QAA2C,UAA3C;AACA,SAASC,iBAAT,QAAkC,sBAAlC;;AAEA,MAAMC,SAAS,GAAIC,GAAD,IAChB,kBAAkBA,GAAlB,IAAyBA,GAAG,CAACC,YAAJ,KAAqB,OADhD;;AASA,MAAMC,MAAM,GAAGN,aAAa,CAC1B,CAACO,GAAD,QAAkDC,IAAlD,KAA2D;AAAA,MAArD;AAAEC,IAAAA,KAAF;AAASC,IAAAA,IAAT;AAAeC,IAAAA,UAAf;AAA2B,OAAGC;AAA9B,GAAqD;AACzD,QAAM;AAAEC,IAAAA,MAAF;AAAUC,IAAAA,OAAV;AAAmBC,IAAAA;AAAnB,MAA4BR,GAAlC;AACA,QAAMS,YAAY,GAAGR,IAAI,CAACS,QAAL,CAClBC,MADkB,CACXhB,iBADW,EAElBiB,GAFkB,CAEbC,KAAD,IAAWA,KAAK,CAACC,IAAN,CAAWd,GAAX,CAFG,CAArB;AAIA,QAAMe,QAAQ,GAAGd,IAAI,CAACS,QAAL,CAAcC,MAAd,CACdE,KAAD,IAAWA,KAAK,YAAYnB,WADb,CAAjB;AAGA,QAAMsB,KAAK,GAAGzB,YAAY,CACxBS,GAAG,CAACQ,IADoB,EAExBR,GAAG,CAACgB,KAAJ,CAAUC,IAAV,EAFwB,EAGxBV,OAHwB,EAIxBF,UAJwB,EAKxBI,YALwB,CAA1B;AAOA,QAAMS,YAAY,GAAG,CAAC,CAACb,UAAU,CAACc,SAAb,IAA0B,CAAC,CAACd,UAAU,CAACe,MAA5D;AACA,QAAMC,OAAO,GAAG,CAAC,CAAClB,IAAlB;AACA,QAAMmB,UAAU,GAAGJ,YAAY,IAAIG,OAAhB,IAA2B,CAAC,CAACnB,KAAhD;;AACA,MAAIoB,UAAJ,EAAgB;AACd,QAAIpB,KAAJ,EAAW;AACT,UAAI,OAAOA,KAAP,KAAiB,SAArB,EAAgC;AAC9BI,QAAAA,MAAM,CAACiB,SAAP;AACD,OAFD,MAEO,IAAI3B,SAAS,CAACM,KAAD,CAAb,EAAsB;AAC3BI,QAAAA,MAAM,CAACiB,SAAP,CAAiBrB,KAAjB;AACD,OAFM,MAEA;AAAA;;AACLI,QAAAA,MAAM,CAACiB,SAAP,mBAAiBrB,KAAK,CAACsB,OAAvB,2DAAkCC,SAAlC;AACD;AACF,KARD,MAQO;AACLnB,MAAAA,MAAM,CAACoB,IAAP;AACD;;AACDpC,IAAAA,sBAAsB,CAACU,GAAD,EAAMK,UAAN,CAAtB;;AACA,QAAIF,IAAJ,EAAU;AACR,YAAMwB,EAAE,GAAGvB,UAAU,GAAGf,MAAM,CAACuC,UAAV,GAAuBvC,MAAM,CAACwC,SAAnD;AACArC,MAAAA,WAAW,CAACgB,IAAD,EAAOF,MAAP,EAAeH,IAAf,EAAqBwB,EAArB,CAAX;AACD;AACF;;AACD1B,EAAAA,IAAI,CAAC6B,KAAL,CACE,EACE,GAAG9B,GADL;AAEEgB,IAAAA,KAFF;AAGET,IAAAA,OAAO,EAAEF,UAAU,CAACE,OAAX,GAAqBF,UAAU,CAACE,OAAX,GAAqBA,OAA1C,GAAoDA;AAH/D,GADF,EAMEQ,QANF;;AAQA,MAAIO,UAAJ,EAAgB;AACdhB,IAAAA,MAAM,CAACyB,OAAP;AACD;AACF,CAjDyB,CAA5B;AAoDA,OAAO,MAAMC,KAAK,GAAIC,KAAD,IAAsC;AACzD,sBAAO;AAAW,IAAA,MAAM,EAAElC;AAAnB,KAA+BkC,KAA/B;AAAsC,IAAA,cAAc;AAApD,KAAP;AACD,CAFM","sourcesContent":["import React from \"react\";\nimport type { RefObject } from \"react\";\n\nimport type { SkPaint } from \"../../skia/types\";\nimport { ClipOp } from \"../../skia/types\";\nimport {\n  processCanvasTransform,\n  processPaint,\n  processClip,\n} from \"../processors\";\nimport type {\n  CustomPaintProps,\n  TransformProps,\n  AnimatedProps,\n  ClipDef,\n} from \"../processors\";\nimport { createDrawing, DrawingNode } from \"../nodes\";\nimport { isDeclarationNode } from \"../nodes/Declaration\";\n\nconst isSkPaint = (obj: RefObject<SkPaint> | SkPaint): obj is SkPaint =>\n  \"__typename__\" in obj && obj.__typename__ === \"Paint\";\n\nexport interface GroupProps extends CustomPaintProps, TransformProps {\n  clip?: ClipDef;\n  invertClip?: boolean;\n  layer?: RefObject<SkPaint> | SkPaint | boolean;\n}\n\nconst onDraw = createDrawing<GroupProps>(\n  (ctx, { layer, clip, invertClip, ...groupProps }, node) => {\n    const { canvas, opacity, Skia } = ctx;\n    const declarations = node.children\n      .filter(isDeclarationNode)\n      .map((child) => child.draw(ctx));\n\n    const drawings = node.children.filter(\n      (child) => child instanceof DrawingNode\n    );\n    const paint = processPaint(\n      ctx.Skia,\n      ctx.paint.copy(),\n      opacity,\n      groupProps,\n      declarations\n    );\n    const hasTransform = !!groupProps.transform || !!groupProps.matrix;\n    const hasClip = !!clip;\n    const shouldSave = hasTransform || hasClip || !!layer;\n    if (shouldSave) {\n      if (layer) {\n        if (typeof layer === \"boolean\") {\n          canvas.saveLayer();\n        } else if (isSkPaint(layer)) {\n          canvas.saveLayer(layer);\n        } else {\n          canvas.saveLayer(layer.current ?? undefined);\n        }\n      } else {\n        canvas.save();\n      }\n      processCanvasTransform(ctx, groupProps);\n      if (clip) {\n        const op = invertClip ? ClipOp.Difference : ClipOp.Intersect;\n        processClip(Skia, canvas, clip, op);\n      }\n    }\n    node.visit(\n      {\n        ...ctx,\n        paint,\n        opacity: groupProps.opacity ? groupProps.opacity * opacity : opacity,\n      },\n      drawings\n    );\n    if (shouldSave) {\n      canvas.restore();\n    }\n  }\n);\n\nexport const Group = (props: AnimatedProps<GroupProps>) => {\n  return <skDrawing onDraw={onDraw} {...props} skipProcessing />;\n};\n"]}
+{"version":3,"sources":["Group.tsx"],"names":["React","ClipOp","processCanvasTransform","processPaint","processClip","createDrawing","DrawingNode","isDeclarationNode","isSkPaint","obj","__typename__","onDraw","ctx","node","layer","clip","invertClip","groupProps","canvas","opacity","Skia","declarations","children","filter","map","child","draw","drawings","paint","copy","hasTransform","transform","matrix","hasClip","shouldSave","saveLayer","current","undefined","save","op","Difference","Intersect","visit","restore","Group","props"],"mappings":";;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AAIA,SAASC,MAAT,QAAuB,kBAAvB;AACA,SACEC,sBADF,EAEEC,YAFF,EAGEC,WAHF,QAIO,eAJP;AAWA,SAASC,aAAT,EAAwBC,WAAxB,QAA2C,UAA3C;AACA,SAASC,iBAAT,QAAkC,sBAAlC;;AAEA,MAAMC,SAAS,GAAIC,GAAD,IAChB,kBAAkBA,GAAlB,IAAyBA,GAAG,CAACC,YAAJ,KAAqB,OADhD;;AASA,MAAMC,MAAM,GAAGN,aAAa,CAC1B,CAACO,GAAD,QAAkDC,IAAlD,KAA2D;AAAA,MAArD;AAAEC,IAAAA,KAAF;AAASC,IAAAA,IAAT;AAAeC,IAAAA,UAAf;AAA2B,OAAGC;AAA9B,GAAqD;AACzD,QAAM;AAAEC,IAAAA,MAAF;AAAUC,IAAAA,OAAV;AAAmBC,IAAAA;AAAnB,MAA4BR,GAAlC;AACA,QAAMS,YAAY,GAAGR,IAAI,CAACS,QAAL,CAClBC,MADkB,CACXhB,iBADW,EAElBiB,GAFkB,CAEbC,KAAD,IAAWA,KAAK,CAACC,IAAN,CAAWd,GAAX,CAFG,CAArB;AAIA,QAAMe,QAAQ,GAAGd,IAAI,CAACS,QAAL,CAAcC,MAAd,CACdE,KAAD,IAAWA,KAAK,YAAYnB,WADb,CAAjB;AAGA,QAAMsB,KAAK,GAAGzB,YAAY,CACxBS,GAAG,CAACQ,IADoB,EAExBR,GAAG,CAACgB,KAAJ,CAAUC,IAAV,EAFwB,EAGxBV,OAHwB,EAIxBF,UAJwB,EAKxBI,YALwB,CAA1B;AAOA,QAAMS,YAAY,GAAG,CAAC,CAACb,UAAU,CAACc,SAAb,IAA0B,CAAC,CAACd,UAAU,CAACe,MAA5D;AACA,QAAMC,OAAO,GAAG,CAAC,CAAClB,IAAlB;AACA,QAAMmB,UAAU,GAAGJ,YAAY,IAAIG,OAAhB,IAA2B,CAAC,CAACnB,KAAhD;;AACA,MAAIoB,UAAJ,EAAgB;AACd,QAAIpB,KAAJ,EAAW;AACT,UAAI,OAAOA,KAAP,KAAiB,SAArB,EAAgC;AAC9BI,QAAAA,MAAM,CAACiB,SAAP;AACD,OAFD,MAEO,IAAI3B,SAAS,CAACM,KAAD,CAAb,EAAsB;AAC3BI,QAAAA,MAAM,CAACiB,SAAP,CAAiBrB,KAAjB;AACD,OAFM,MAEA;AAAA;;AACLI,QAAAA,MAAM,CAACiB,SAAP,mBAAiBrB,KAAK,CAACsB,OAAvB,2DAAkCC,SAAlC;AACD;AACF,KARD,MAQO;AACLnB,MAAAA,MAAM,CAACoB,IAAP;AACD;;AACDpC,IAAAA,sBAAsB,CAACgB,MAAD,EAASD,UAAT,CAAtB;;AACA,QAAIF,IAAJ,EAAU;AACR,YAAMwB,EAAE,GAAGvB,UAAU,GAAGf,MAAM,CAACuC,UAAV,GAAuBvC,MAAM,CAACwC,SAAnD;AACArC,MAAAA,WAAW,CAACgB,IAAD,EAAOF,MAAP,EAAeH,IAAf,EAAqBwB,EAArB,CAAX;AACD;AACF;;AACD1B,EAAAA,IAAI,CAAC6B,KAAL,CACE,EACE,GAAG9B,GADL;AAEEgB,IAAAA,KAFF;AAGET,IAAAA,OAAO,EAAEF,UAAU,CAACE,OAAX,GAAqBF,UAAU,CAACE,OAAX,GAAqBA,OAA1C,GAAoDA;AAH/D,GADF,EAMEQ,QANF;;AAQA,MAAIO,UAAJ,EAAgB;AACdhB,IAAAA,MAAM,CAACyB,OAAP;AACD;AACF,CAjDyB,CAA5B;AAoDA,OAAO,MAAMC,KAAK,GAAIC,KAAD,IAAsC;AACzD,sBAAO;AAAW,IAAA,MAAM,EAAElC;AAAnB,KAA+BkC,KAA/B;AAAsC,IAAA,cAAc;AAApD,KAAP;AACD,CAFM","sourcesContent":["import React from \"react\";\nimport type { RefObject } from \"react\";\n\nimport type { SkPaint } from \"../../skia/types\";\nimport { ClipOp } from \"../../skia/types\";\nimport {\n  processCanvasTransform,\n  processPaint,\n  processClip,\n} from \"../processors\";\nimport type {\n  CustomPaintProps,\n  TransformProps,\n  AnimatedProps,\n  ClipDef,\n} from \"../processors\";\nimport { createDrawing, DrawingNode } from \"../nodes\";\nimport { isDeclarationNode } from \"../nodes/Declaration\";\n\nconst isSkPaint = (obj: RefObject<SkPaint> | SkPaint): obj is SkPaint =>\n  \"__typename__\" in obj && obj.__typename__ === \"Paint\";\n\nexport interface GroupProps extends CustomPaintProps, TransformProps {\n  clip?: ClipDef;\n  invertClip?: boolean;\n  layer?: RefObject<SkPaint> | SkPaint | boolean;\n}\n\nconst onDraw = createDrawing<GroupProps>(\n  (ctx, { layer, clip, invertClip, ...groupProps }, node) => {\n    const { canvas, opacity, Skia } = ctx;\n    const declarations = node.children\n      .filter(isDeclarationNode)\n      .map((child) => child.draw(ctx));\n\n    const drawings = node.children.filter(\n      (child) => child instanceof DrawingNode\n    );\n    const paint = processPaint(\n      ctx.Skia,\n      ctx.paint.copy(),\n      opacity,\n      groupProps,\n      declarations\n    );\n    const hasTransform = !!groupProps.transform || !!groupProps.matrix;\n    const hasClip = !!clip;\n    const shouldSave = hasTransform || hasClip || !!layer;\n    if (shouldSave) {\n      if (layer) {\n        if (typeof layer === \"boolean\") {\n          canvas.saveLayer();\n        } else if (isSkPaint(layer)) {\n          canvas.saveLayer(layer);\n        } else {\n          canvas.saveLayer(layer.current ?? undefined);\n        }\n      } else {\n        canvas.save();\n      }\n      processCanvasTransform(canvas, groupProps);\n      if (clip) {\n        const op = invertClip ? ClipOp.Difference : ClipOp.Intersect;\n        processClip(Skia, canvas, clip, op);\n      }\n    }\n    node.visit(\n      {\n        ...ctx,\n        paint,\n        opacity: groupProps.opacity ? groupProps.opacity * opacity : opacity,\n      },\n      drawings\n    );\n    if (shouldSave) {\n      canvas.restore();\n    }\n  }\n);\n\nexport const Group = (props: AnimatedProps<GroupProps>) => {\n  return <skDrawing onDraw={onDraw} {...props} skipProcessing />;\n};\n"]}

package/lib/module/renderer/components/text/Glyphs.js

@@ -2,13 +2,10 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 
 import React from "react";
 import { createDrawing } from "../../nodes/Drawing";
-import { processFont } from "../../processors/Font";
 const onDraw = createDrawing((_ref, _ref2) => {
   let {
     canvas,
-    paint,
-    fontMgr,
-    Skia
+    paint
   } = _ref;
   let {
     glyphs: rawGlyphs,
@@ -16,7 +13,9 @@ const onDraw = createDrawing((_ref, _ref2) => {
     y,
     ...fontDef
   } = _ref2;
-  const font = processFont(Skia, fontMgr, fontDef);
+  const {
+    font
+  } = fontDef;
   const {
     glyphs,
     positions

package/lib/module/renderer/components/text/Glyphs.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Glyphs.tsx"],"names":["React","createDrawing","processFont","onDraw","canvas","paint","fontMgr","Skia","glyphs","rawGlyphs","x","y","fontDef","font","positions","reduce","acc","glyph","id","pos","push","drawGlyphs","Glyphs","props","defaultProps"],"mappings":";;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AAGA,SAASC,aAAT,QAA8B,qBAA9B;AAGA,SAASC,WAAT,QAA4B,uBAA5B;AAmBA,MAAMC,MAAM,GAAGF,aAAa,CAC1B,iBAGK;AAAA,MAFH;AAAEG,IAAAA,MAAF;AAAUC,IAAAA,KAAV;AAAiBC,IAAAA,OAAjB;AAA0BC,IAAAA;AAA1B,GAEG;AAAA,MADH;AAAEC,IAAAA,MAAM,EAAEC,SAAV;AAAqBC,IAAAA,CAArB;AAAwBC,IAAAA,CAAxB;AAA2B,OAAGC;AAA9B,GACG;AACH,QAAMC,IAAI,GAAGX,WAAW,CAACK,IAAD,EAAOD,OAAP,EAAgBM,OAAhB,CAAxB;AACA,QAAM;AAAEJ,IAAAA,MAAF;AAAUM,IAAAA;AAAV,MAAwBL,SAAS,CAACM,MAAV,CAC5B,CAACC,GAAD,EAAMC,KAAN,KAAgB;AACd,UAAM;AAAEC,MAAAA,EAAF;AAAMC,MAAAA;AAAN,QAAcF,KAApB;AACAD,IAAAA,GAAG,CAACR,MAAJ,CAAWY,IAAX,CAAgBF,EAAhB;AACAF,IAAAA,GAAG,CAACF,SAAJ,CAAcM,IAAd,CAAmBD,GAAnB;AACA,WAAOH,GAAP;AACD,GAN2B,EAO5B;AAAER,IAAAA,MAAM,EAAE,EAAV;AAAcM,IAAAA,SAAS,EAAE;AAAzB,GAP4B,CAA9B;AASAV,EAAAA,MAAM,CAACiB,UAAP,CAAkBb,MAAlB,EAA0BM,SAA1B,EAAqCJ,CAArC,EAAwCC,CAAxC,EAA2CE,IAA3C,EAAiDR,KAAjD;AACD,CAhByB,CAA5B;AAmBA,OAAO,MAAMiB,MAAM,GAAIC,KAAD,IAAuC;AAC3D,sBAAO;AAAW,IAAA,MAAM,EAAEpB;AAAnB,KAA+BoB,KAA/B,EAAP;AACD,CAFM;AAIPD,MAAM,CAACE,YAAP,GAAsB;AACpBd,EAAAA,CAAC,EAAE,CADiB;AAEpBC,EAAAA,CAAC,EAAE;AAFiB,CAAtB","sourcesContent":["import React from \"react\";\n\nimport type { CustomPaintProps, AnimatedProps } from \"../../processors\";\nimport { createDrawing } from \"../../nodes/Drawing\";\nimport type { SkPoint } from \"../../../skia/types\";\nimport type { FontDef } from \"../../processors/Font\";\nimport { processFont } from \"../../processors/Font\";\n\nexport interface Glyph {\n  id: number;\n  pos: SkPoint;\n}\n\nexport type GlyphsProps = CustomPaintProps &\n  FontDef & {\n    x: number;\n    y: number;\n    glyphs: Glyph[];\n  };\n\ninterface ProcessedGlyphs {\n  glyphs: number[];\n  positions: SkPoint[];\n}\n\nconst onDraw = createDrawing<GlyphsProps>(\n  (\n    { canvas, paint, fontMgr, Skia },\n    { glyphs: rawGlyphs, x, y, ...fontDef }\n  ) => {\n    const font = processFont(Skia, fontMgr, fontDef);\n    const { glyphs, positions } = rawGlyphs.reduce<ProcessedGlyphs>(\n      (acc, glyph) => {\n        const { id, pos } = glyph;\n        acc.glyphs.push(id);\n        acc.positions.push(pos);\n        return acc;\n      },\n      { glyphs: [], positions: [] }\n    );\n    canvas.drawGlyphs(glyphs, positions, x, y, font, paint);\n  }\n);\n\nexport const Glyphs = (props: AnimatedProps<GlyphsProps>) => {\n  return <skDrawing onDraw={onDraw} {...props} />;\n};\n\nGlyphs.defaultProps = {\n  x: 0,\n  y: 0,\n};\n"]}
+{"version":3,"sources":["Glyphs.tsx"],"names":["React","createDrawing","onDraw","canvas","paint","glyphs","rawGlyphs","x","y","fontDef","font","positions","reduce","acc","glyph","id","pos","push","drawGlyphs","Glyphs","props","defaultProps"],"mappings":";;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AAGA,SAASC,aAAT,QAA8B,qBAA9B;AAqBA,MAAMC,MAAM,GAAGD,aAAa,CAC1B,iBAAgE;AAAA,MAA/D;AAAEE,IAAAA,MAAF;AAAUC,IAAAA;AAAV,GAA+D;AAAA,MAA5C;AAAEC,IAAAA,MAAM,EAAEC,SAAV;AAAqBC,IAAAA,CAArB;AAAwBC,IAAAA,CAAxB;AAA2B,OAAGC;AAA9B,GAA4C;AAC9D,QAAM;AAAEC,IAAAA;AAAF,MAAWD,OAAjB;AACA,QAAM;AAAEJ,IAAAA,MAAF;AAAUM,IAAAA;AAAV,MAAwBL,SAAS,CAACM,MAAV,CAC5B,CAACC,GAAD,EAAMC,KAAN,KAAgB;AACd,UAAM;AAAEC,MAAAA,EAAF;AAAMC,MAAAA;AAAN,QAAcF,KAApB;AACAD,IAAAA,GAAG,CAACR,MAAJ,CAAWY,IAAX,CAAgBF,EAAhB;AACAF,IAAAA,GAAG,CAACF,SAAJ,CAAcM,IAAd,CAAmBD,GAAnB;AACA,WAAOH,GAAP;AACD,GAN2B,EAO5B;AAAER,IAAAA,MAAM,EAAE,EAAV;AAAcM,IAAAA,SAAS,EAAE;AAAzB,GAP4B,CAA9B;AASAR,EAAAA,MAAM,CAACe,UAAP,CAAkBb,MAAlB,EAA0BM,SAA1B,EAAqCJ,CAArC,EAAwCC,CAAxC,EAA2CE,IAA3C,EAAiDN,KAAjD;AACD,CAbyB,CAA5B;AAgBA,OAAO,MAAMe,MAAM,GAAIC,KAAD,IAAuC;AAC3D,sBAAO;AAAW,IAAA,MAAM,EAAElB;AAAnB,KAA+BkB,KAA/B,EAAP;AACD,CAFM;AAIPD,MAAM,CAACE,YAAP,GAAsB;AACpBd,EAAAA,CAAC,EAAE,CADiB;AAEpBC,EAAAA,CAAC,EAAE;AAFiB,CAAtB","sourcesContent":["import React from \"react\";\n\nimport type { CustomPaintProps, AnimatedProps } from \"../../processors\";\nimport { createDrawing } from \"../../nodes/Drawing\";\nimport type { SkPoint } from \"../../../skia/types\";\nimport type { FontDef } from \"../../processors/Font\";\n\nexport interface Glyph {\n  id: number;\n  pos: SkPoint;\n}\n\nexport type GlyphsProps = CustomPaintProps &\n  FontDef & {\n    x: number;\n    y: number;\n    glyphs: Glyph[];\n  };\n\ninterface ProcessedGlyphs {\n  glyphs: number[];\n  positions: SkPoint[];\n}\n\nconst onDraw = createDrawing<GlyphsProps>(\n  ({ canvas, paint }, { glyphs: rawGlyphs, x, y, ...fontDef }) => {\n    const { font } = fontDef;\n    const { glyphs, positions } = rawGlyphs.reduce<ProcessedGlyphs>(\n      (acc, glyph) => {\n        const { id, pos } = glyph;\n        acc.glyphs.push(id);\n        acc.positions.push(pos);\n        return acc;\n      },\n      { glyphs: [], positions: [] }\n    );\n    canvas.drawGlyphs(glyphs, positions, x, y, font, paint);\n  }\n);\n\nexport const Glyphs = (props: AnimatedProps<GlyphsProps>) => {\n  return <skDrawing onDraw={onDraw} {...props} />;\n};\n\nGlyphs.defaultProps = {\n  x: 0,\n  y: 0,\n};\n"]}