@shopify/react-native-skia 0.1.137 → 0.1.140

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

@@ -4,9 +4,10 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 
 /* global HTMLCanvasElement */
 import React from "react";
-import { View } from "react-native";
+import { PixelRatio, View } from "react-native";
 import { JsiSkSurface } from "../skia/web/JsiSkSurface";
 import { TouchType } from "./types";
+const pd = PixelRatio.get();
 export class SkiaView extends React.Component {
   constructor(props) {
     var _props$mode;
@@ -27,12 +28,12 @@ export class SkiaView extends React.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";
   }
 
@@ -43,21 +44,30 @@ export class SkiaView extends React.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(global.CanvasKit, global.CanvasKit.MakeWebGLCanvasSurface(this._canvasRef.current)); // Get canvas and repaint
-
-        if (this._surface) {
-          this._canvas = this._surface.getCanvas();
-          this.redraw();
-        }
+    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(CanvasKit, surface);
+      this._canvas = this._surface.getCanvas();
+      this.redraw();
+    }
   }
 
   componentDidMount() {
@@ -65,11 +75,13 @@ export class SkiaView extends React.Component {
     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
@@ -92,26 +104,31 @@ export class SkiaView extends React.Component {
     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.tick.bind(this));
+        (_this$_surface2 = this._surface) === null || _this$_surface2 === void 0 ? void 0 : _this$_surface2.ref.flush();
+      }
     }
+
+    this.requestId = requestAnimationFrame(this.tick.bind(this));
   }
 
   redraw() {
@@ -163,20 +180,8 @@ export class SkiaView extends React.Component {
     this.redraw();
   }
 
-  handleTouchStart(evt) {
-    this.handleTouchEvent(evt, TouchType.Start);
-  }
-
-  handleTouchMove(evt) {
-    this.handleTouchEvent(evt, TouchType.Active);
-  }
-
-  handleTouchEnd(evt) {
-    this.handleTouchEvent(evt, TouchType.Cancelled);
-  }
-
-  handleTouchCancel(evt) {
-    this.handleTouchEvent(evt, TouchType.End);
+  createTouchHandler(touchType) {
+    return evt => this.handleTouchEvent(evt, touchType);
   }
 
   render() {
@@ -189,12 +194,16 @@ export class SkiaView extends React.Component {
       onLayout: this.onLayout.bind(this)
     }), /*#__PURE__*/React.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(TouchType.Start),
+      onPointerMove: this.createTouchHandler(TouchType.Active),
+      onPointerUp: this.createTouchHandler(TouchType.End),
+      onPointerCancel: this.createTouchHandler(TouchType.Cancelled),
+      onPointerLeave: this.createTouchHandler(TouchType.End),
+      onPointerOut: this.createTouchHandler(TouchType.End)
     }));
   }
 

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

@@ -1 +1 @@
-{"version":3,"sources":["SkiaView.web.tsx"],"names":["React","View","JsiSkSurface","TouchType","SkiaView","Component","constructor","props","createRef","state","width","height","_mode","mode","unsubscribeAll","_unsubscriptions","forEach","u","onLayout","evt","setState","nativeEvent","layout","_canvasRef","current","_surface","global","CanvasKit","MakeWebGLCanvasSurface","_canvas","getCanvas","redraw","componentDidMount","tick","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","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.redraw();\n          }\n        }\n      }\n    );\n  }\n\n  componentDidMount() {\n    // Start render loop\n    this.tick();\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 tick() {\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.tick.bind(this));\n    }\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  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":["React","PixelRatio","View","JsiSkSurface","TouchType","pd","get","SkiaView","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","_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","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/module/views/useTouchHandler.js

@@ -12,7 +12,7 @@ const useInternalTouchHandler = function (handlers) {
     history.forEach(touches => {
       // Enumerate touches
       for (let i = 0; i < touches.length; i++) {
-        var _prevTouchInfoRef$cur, _prevTouchInfoRef$cur2, _prevTouchInfoRef$cur3, _prevTouchInfoRef$cur4, _prevTouchInfoRef$cur5, _prevTouchInfoRef$cur6, _prevVelocityRef$curr, _prevVelocityRef$curr2;
+        var _prevTouchInfoRef$cur, _prevTouchInfoRef$cur2, _prevTouchInfoRef$cur3, _prevTouchInfoRef$cur4, _prevTouchInfoRef$cur5, _prevTouchInfoRef$cur6;
 
         if (!multiTouch && i > 0) {
           break;
@@ -30,12 +30,17 @@ const useInternalTouchHandler = function (handlers) {
               x: distX / timeDiffseconds / PixelRatio.get(),
               y: distY / timeDiffseconds / PixelRatio.get()
             };
+          } else {
+            prevVelocityRef.current[touch.id] = {
+              x: 0,
+              y: 0
+            };
           }
         }
 
         const extendedTouchInfo = { ...touch,
-          velocityX: (_prevVelocityRef$curr = prevVelocityRef.current[touch.id]) === null || _prevVelocityRef$curr === void 0 ? void 0 : _prevVelocityRef$curr.x,
-          velocityY: (_prevVelocityRef$curr2 = prevVelocityRef.current[touch.id]) === null || _prevVelocityRef$curr2 === void 0 ? void 0 : _prevVelocityRef$curr2.y
+          velocityX: prevVelocityRef.current[touch.id].x,
+          velocityY: prevVelocityRef.current[touch.id].y
         }; // Save previous touch
 
         prevTouchInfoRef.current[touch.id] = touch;

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

@@ -1 +1 @@
-{"version":3,"sources":["useTouchHandler.ts"],"names":["useCallback","useRef","PixelRatio","TouchType","useInternalTouchHandler","handlers","deps","multiTouch","prevTouchInfoRef","prevVelocityRef","history","forEach","touches","i","length","touch","timeDiffseconds","timestamp","current","id","distX","x","distY","y","type","Start","End","Cancelled","get","extendedTouchInfo","velocityX","velocityY","onStart","Active","onActive","onEnd","useTouchHandler","useMultiTouchHandler"],"mappings":"AACA,SAASA,WAAT,EAAsBC,MAAtB,QAAoC,OAApC;AACA,SAASC,UAAT,QAA2B,cAA3B;AAQA,SAASC,SAAT,QAA0B,SAA1B;;AAEA,MAAMC,uBAAuB,GAAG,UAC9BC,QAD8B,EAIb;AAAA,MAFjBC,IAEiB,uEAFM,EAEN;AAAA,MADjBC,UACiB,uEADJ,KACI;AACjB,QAAMC,gBAAgB,GAAGP,MAAM,CAA+B,EAA/B,CAA/B;AACA,QAAMQ,eAAe,GAAGR,MAAM,CAC5B,EAD4B,CAA9B;AAIA,SAAOD,WAAW,CAAEU,OAAD,IAAsC;AACvD;AACAA,IAAAA,OAAO,CAACC,OAAR,CAAiBC,OAAD,IAAa;AAC3B;AACA,WAAK,IAAIC,CAAC,GAAG,CAAb,EAAgBA,CAAC,GAAGD,OAAO,CAACE,MAA5B,EAAoCD,CAAC,EAArC,EAAyC;AAAA;;AACvC,YAAI,CAACN,UAAD,IAAeM,CAAC,GAAG,CAAvB,EAA0B;AACxB;AACD;;AAED,cAAME,KAAK,GAAGH,OAAO,CAACC,CAAD,CAArB,CALuC,CAOvC;;AACA,cAAMG,eAAe,GACnBD,KAAK,CAACE,SAAN,uDACCT,gBAAgB,CAACU,OAAjB,CAAyBH,KAAK,CAACI,EAA/B,CADD,2DACC,uBAAoCF,SADrC,yEACkDF,KAAK,CAACE,SADxD,CADF;AAIA,cAAMG,KAAK,GACTL,KAAK,CAACM,CAAN,wDAAWb,gBAAgB,CAACU,OAAjB,CAAyBH,KAAK,CAACI,EAA/B,CAAX,2DAAW,uBAAoCE,CAA/C,2EAAoDN,KAAK,CAACM,CAA1D,CADF;AAEA,cAAMC,KAAK,GACTP,KAAK,CAACQ,CAAN,wDAAWf,gBAAgB,CAACU,OAAjB,CAAyBH,KAAK,CAACI,EAA/B,CAAX,2DAAW,uBAAoCI,CAA/C,2EAAoDR,KAAK,CAACQ,CAA1D,CADF;;AAGA,YACER,KAAK,CAACS,IAAN,KAAerB,SAAS,CAACsB,KAAzB,IACAV,KAAK,CAACS,IAAN,KAAerB,SAAS,CAACuB,GADzB,IAEAX,KAAK,CAACS,IAAN,KAAerB,SAAS,CAACwB,SAH3B,EAIE;AACA,cAAIX,eAAe,GAAG,CAAtB,EAAyB;AACvBP,YAAAA,eAAe,CAACS,OAAhB,CAAwBH,KAAK,CAACI,EAA9B,IAAoC;AAClCE,cAAAA,CAAC,EAAED,KAAK,GAAGJ,eAAR,GAA0Bd,UAAU,CAAC0B,GAAX,EADK;AAElCL,cAAAA,CAAC,EAAED,KAAK,GAAGN,eAAR,GAA0Bd,UAAU,CAAC0B,GAAX;AAFK,aAApC;AAID;AACF;;AAED,cAAMC,iBAAoC,GAAG,EAC3C,GAAGd,KADwC;AAE3Ce,UAAAA,SAAS,2BAAErB,eAAe,CAACS,OAAhB,CAAwBH,KAAK,CAACI,EAA9B,CAAF,0DAAE,sBAAmCE,CAFH;AAG3CU,UAAAA,SAAS,4BAAEtB,eAAe,CAACS,OAAhB,CAAwBH,KAAK,CAACI,EAA9B,CAAF,2DAAE,uBAAmCI;AAHH,SAA7C,CA9BuC,CAoCvC;;AACAf,QAAAA,gBAAgB,CAACU,OAAjB,CAAyBH,KAAK,CAACI,EAA/B,IAAqCJ,KAArC;;AAEA,YAAIA,KAAK,CAACS,IAAN,KAAerB,SAAS,CAACsB,KAA7B,EAAoC;AAClC,iBAAOhB,eAAe,CAACS,OAAhB,CAAwBH,KAAK,CAACI,EAA9B,CAAP;AACAd,UAAAA,QAAQ,CAAC2B,OAAT,IAAoB3B,QAAQ,CAAC2B,OAAT,CAAiBjB,KAAjB,CAApB;AACD,SAHD,MAGO,IAAIA,KAAK,CAACS,IAAN,KAAerB,SAAS,CAAC8B,MAA7B,EAAqC;AAC1C5B,UAAAA,QAAQ,CAAC6B,QAAT,IAAqB7B,QAAQ,CAAC6B,QAAT,CAAkBL,iBAAlB,CAArB;AACD,SAFM,MAEA;AACLxB,UAAAA,QAAQ,CAAC6B,QAAT,IAAqB7B,QAAQ,CAAC6B,QAAT,CAAkBL,iBAAlB,CAArB;AACAxB,UAAAA,QAAQ,CAAC8B,KAAT,IAAkB9B,QAAQ,CAAC8B,KAAT,CAAeN,iBAAf,CAAlB;AACD;AACF;AACF,KAnDD,EAFuD,CAsDvD;AACD,GAvDiB,EAuDfvB,IAvDe,CAAlB;AAwDD,CAlED;AAoEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACA,OAAO,MAAM8B,eAAe,GAAG,UAC7B/B,QAD6B,EAGZ;AAAA,MADjBC,IACiB,uEADM,EACN;AACjB,SAAOF,uBAAuB,CAACC,QAAD,EAAWC,IAAX,EAAiB,KAAjB,CAA9B;AACD,CALM;AAOP;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,OAAO,MAAM+B,oBAAoB,GAAG,UAClChC,QADkC,EAGjB;AAAA,MADjBC,IACiB,uEADM,EACN;AACjB,SAAOF,uBAAuB,CAACC,QAAD,EAAWC,IAAX,EAAiB,IAAjB,CAA9B;AACD,CALM","sourcesContent":["import type { DependencyList } from \"react\";\nimport { useCallback, useRef } from \"react\";\nimport { PixelRatio } from \"react-native\";\n\nimport type {\n  ExtendedTouchInfo,\n  TouchHandlers,\n  TouchHandler,\n  TouchInfo,\n} from \"./types\";\nimport { TouchType } from \"./types\";\n\nconst useInternalTouchHandler = (\n  handlers: TouchHandlers,\n  deps: DependencyList = [],\n  multiTouch = false\n): TouchHandler => {\n  const prevTouchInfoRef = useRef<{ [key: number]: TouchInfo }>({});\n  const prevVelocityRef = useRef<{ [key: number]: { x: number; y: number } }>(\n    {}\n  );\n\n  return useCallback((history: Array<Array<TouchInfo>>) => {\n    // Process all items in the current touch history\n    history.forEach((touches) => {\n      // Enumerate touches\n      for (let i = 0; i < touches.length; i++) {\n        if (!multiTouch && i > 0) {\n          break;\n        }\n\n        const touch = touches[i];\n\n        // Calculate the velocity from the previous touch.\n        const timeDiffseconds =\n          touch.timestamp -\n          (prevTouchInfoRef.current[touch.id]?.timestamp ?? touch.timestamp);\n\n        const distX =\n          touch.x - (prevTouchInfoRef.current[touch.id]?.x ?? touch.x);\n        const distY =\n          touch.y - (prevTouchInfoRef.current[touch.id]?.y ?? touch.y);\n\n        if (\n          touch.type !== TouchType.Start &&\n          touch.type !== TouchType.End &&\n          touch.type !== TouchType.Cancelled\n        ) {\n          if (timeDiffseconds > 0) {\n            prevVelocityRef.current[touch.id] = {\n              x: distX / timeDiffseconds / PixelRatio.get(),\n              y: distY / timeDiffseconds / PixelRatio.get(),\n            };\n          }\n        }\n\n        const extendedTouchInfo: ExtendedTouchInfo = {\n          ...touch,\n          velocityX: prevVelocityRef.current[touch.id]?.x,\n          velocityY: prevVelocityRef.current[touch.id]?.y,\n        };\n\n        // Save previous touch\n        prevTouchInfoRef.current[touch.id] = touch;\n\n        if (touch.type === TouchType.Start) {\n          delete prevVelocityRef.current[touch.id];\n          handlers.onStart && handlers.onStart(touch);\n        } else if (touch.type === TouchType.Active) {\n          handlers.onActive && handlers.onActive(extendedTouchInfo);\n        } else {\n          handlers.onActive && handlers.onActive(extendedTouchInfo);\n          handlers.onEnd && handlers.onEnd(extendedTouchInfo);\n        }\n      }\n    });\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, deps);\n};\n\n/**\n * Provides a callback for handling touch events in the Skia View.\n * This touch handler only handles single touches.\n * @param handlers Callbacks for the different touch states\n * @param deps optional Dependency array to update the handlers\n * @returns A function that can be used from within the onDraw callback to\n * update and handle touch events. Call it with the touches property from\n * the info object.\n */\nexport const useTouchHandler = (\n  handlers: TouchHandlers,\n  deps: DependencyList = []\n): TouchHandler => {\n  return useInternalTouchHandler(handlers, deps, false);\n};\n\n/**\n * Provides a callback for handling touch events in the Skia View.\n * This touch handler handles multiple touches.\n * @param handlers Callbacks for the different touch states\n * @param deps optional Dependency array to update the handlers\n * @returns A function that can be used from within the onDraw callback to\n * update and handle touch events. Call it with the touches property from\n * the info object.\n */\nexport const useMultiTouchHandler = (\n  handlers: TouchHandlers,\n  deps: DependencyList = []\n): TouchHandler => {\n  return useInternalTouchHandler(handlers, deps, true);\n};\n"]}
+{"version":3,"sources":["useTouchHandler.ts"],"names":["useCallback","useRef","PixelRatio","TouchType","useInternalTouchHandler","handlers","deps","multiTouch","prevTouchInfoRef","prevVelocityRef","history","forEach","touches","i","length","touch","timeDiffseconds","timestamp","current","id","distX","x","distY","y","type","Start","End","Cancelled","get","extendedTouchInfo","velocityX","velocityY","onStart","Active","onActive","onEnd","useTouchHandler","useMultiTouchHandler"],"mappings":"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","sourcesContent":["import type { DependencyList } from \"react\";\nimport { useCallback, useRef } from \"react\";\nimport { PixelRatio } from \"react-native\";\n\nimport type {\n  ExtendedTouchInfo,\n  TouchHandlers,\n  TouchHandler,\n  TouchInfo,\n} from \"./types\";\nimport { TouchType } from \"./types\";\n\nconst useInternalTouchHandler = (\n  handlers: TouchHandlers,\n  deps: DependencyList = [],\n  multiTouch = false\n): TouchHandler => {\n  const prevTouchInfoRef = useRef<{ [key: number]: TouchInfo }>({});\n  const prevVelocityRef = useRef<{ [key: number]: { x: number; y: number } }>(\n    {}\n  );\n\n  return useCallback((history: Array<Array<TouchInfo>>) => {\n    // Process all items in the current touch history\n    history.forEach((touches) => {\n      // Enumerate touches\n      for (let i = 0; i < touches.length; i++) {\n        if (!multiTouch && i > 0) {\n          break;\n        }\n\n        const touch = touches[i];\n\n        // Calculate the velocity from the previous touch.\n        const timeDiffseconds =\n          touch.timestamp -\n          (prevTouchInfoRef.current[touch.id]?.timestamp ?? touch.timestamp);\n\n        const distX =\n          touch.x - (prevTouchInfoRef.current[touch.id]?.x ?? touch.x);\n        const distY =\n          touch.y - (prevTouchInfoRef.current[touch.id]?.y ?? touch.y);\n\n        if (\n          touch.type !== TouchType.Start &&\n          touch.type !== TouchType.End &&\n          touch.type !== TouchType.Cancelled\n        ) {\n          if (timeDiffseconds > 0) {\n            prevVelocityRef.current[touch.id] = {\n              x: distX / timeDiffseconds / PixelRatio.get(),\n              y: distY / timeDiffseconds / PixelRatio.get(),\n            };\n          } else {\n            prevVelocityRef.current[touch.id] = { x: 0, y: 0 };\n          }\n        }\n\n        const extendedTouchInfo: ExtendedTouchInfo = {\n          ...touch,\n          velocityX: prevVelocityRef.current[touch.id].x,\n          velocityY: prevVelocityRef.current[touch.id].y,\n        };\n\n        // Save previous touch\n        prevTouchInfoRef.current[touch.id] = touch;\n\n        if (touch.type === TouchType.Start) {\n          delete prevVelocityRef.current[touch.id];\n          handlers.onStart && handlers.onStart(touch);\n        } else if (touch.type === TouchType.Active) {\n          handlers.onActive && handlers.onActive(extendedTouchInfo);\n        } else {\n          handlers.onActive && handlers.onActive(extendedTouchInfo);\n          handlers.onEnd && handlers.onEnd(extendedTouchInfo);\n        }\n      }\n    });\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, deps);\n};\n\n/**\n * Provides a callback for handling touch events in the Skia View.\n * This touch handler only handles single touches.\n * @param handlers Callbacks for the different touch states\n * @param deps optional Dependency array to update the handlers\n * @returns A function that can be used from within the onDraw callback to\n * update and handle touch events. Call it with the touches property from\n * the info object.\n */\nexport const useTouchHandler = (\n  handlers: TouchHandlers,\n  deps: DependencyList = []\n): TouchHandler => {\n  return useInternalTouchHandler(handlers, deps, false);\n};\n\n/**\n * Provides a callback for handling touch events in the Skia View.\n * This touch handler handles multiple touches.\n * @param handlers Callbacks for the different touch states\n * @param deps optional Dependency array to update the handlers\n * @returns A function that can be used from within the onDraw callback to\n * update and handle touch events. Call it with the touches property from\n * the info object.\n */\nexport const useMultiTouchHandler = (\n  handlers: TouchHandlers,\n  deps: DependencyList = []\n): TouchHandler => {\n  return useInternalTouchHandler(handlers, deps, true);\n};\n"]}

package/lib/module/web/LoadSkiaWeb.js

@@ -1,8 +1,12 @@
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-expect-error
 import CanvasKitInit from "canvaskit-wasm/bin/full/canvaskit";
-export const LoadSkiaWeb = async () => {
-  const CanvasKit = await CanvasKitInit(); // The CanvasKit API is stored on the global object and used
+export const LoadSkiaWeb = async opts => {
+  if (global.CanvasKit !== undefined) {
+    return;
+  }
+
+  const CanvasKit = await CanvasKitInit(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;

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

@@ -1 +1 @@
-{"version":3,"sources":["LoadSkiaWeb.tsx"],"names":["CanvasKitInit","LoadSkiaWeb","CanvasKit","global","LoadSkia"],"mappings":"AAAA;AACA;AACA,OAAOA,aAAP,MAA0B,mCAA1B;AAOA,OAAO,MAAMC,WAAW,GAAG,YAAY;AACrC,QAAMC,SAAS,GAAG,MAAMF,aAAa,EAArC,CADqC,CAErC;AACA;;AACAG,EAAAA,MAAM,CAACD,SAAP,GAAmBA,SAAnB;AACD,CALM,C,CAOP;;AACA,OAAO,MAAME,QAAQ,GAAGH,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 { CanvasKit as CanvasKitType } from \"canvaskit-wasm\";\n\ndeclare global {\n  var CanvasKit: CanvasKitType;\n}\n\nexport const LoadSkiaWeb = 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\n// We keep this function for backward compatibility\nexport const LoadSkia = LoadSkiaWeb;\n"]}
+{"version":3,"sources":["LoadSkiaWeb.tsx"],"names":["CanvasKitInit","LoadSkiaWeb","opts","global","CanvasKit","undefined","LoadSkia"],"mappings":"AAAA;AACA;AACA,OAAOA,aAAP,MAA0B,mCAA1B;AAUA,OAAO,MAAMC,WAAW,GAAG,MAAOC,IAAP,IAAuC;AAChE,MAAIC,MAAM,CAACC,SAAP,KAAqBC,SAAzB,EAAoC;AAClC;AACD;;AACD,QAAMD,SAAS,GAAG,MAAMJ,aAAa,CAACE,IAAD,CAArC,CAJgE,CAKhE;AACA;;AACAC,EAAAA,MAAM,CAACC,SAAP,GAAmBA,SAAnB;AACD,CARM,C,CAUP;;AACA,OAAO,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/module/web/WithSkiaWeb.js

@@ -4,19 +4,20 @@ import { LoadSkiaWeb } from "./LoadSkiaWeb";
 export const WithSkiaWeb = _ref => {
   let {
     getComponent,
-    fallback
+    fallback,
+    opts
   } = _ref;
   const Inner = useMemo(() => /*#__PURE__*/lazy(async () => {
     if (Platform.OS === "web") {
-      await LoadSkiaWeb();
+      await LoadSkiaWeb(opts);
     } else {
       console.warn("<WithSkiaWeb /> is only necessary on web. Consider not using on native.");
     }
 
     return getComponent();
-  }), [getComponent]);
+  }), [getComponent, opts]);
   return /*#__PURE__*/React.createElement(Suspense, {
-    fallback: fallback
+    fallback: fallback !== null && fallback !== void 0 ? fallback : null
   }, /*#__PURE__*/React.createElement(Inner, null));
 };
 //# sourceMappingURL=WithSkiaWeb.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["WithSkiaWeb.tsx"],"names":["React","useMemo","lazy","Suspense","Platform","LoadSkiaWeb","WithSkiaWeb","getComponent","fallback","Inner","OS","console","warn"],"mappings":"AACA,OAAOA,KAAP,IAAgBC,OAAhB,EAAyBC,IAAzB,EAA+BC,QAA/B,QAA+C,OAA/C;AACA,SAASC,QAAT,QAAyB,cAAzB;AAEA,SAASC,WAAT,QAA4B,eAA5B;AAOA,OAAO,MAAMC,WAAW,GAAG,QAA+C;AAAA,MAA9C;AAAEC,IAAAA,YAAF;AAAgBC,IAAAA;AAAhB,GAA8C;AACxE,QAAMC,KAAK,GAAGR,OAAO,CACnB,mBACEC,IAAI,CAAC,YAAY;AACf,QAAIE,QAAQ,CAACM,EAAT,KAAgB,KAApB,EAA2B;AACzB,YAAML,WAAW,EAAjB;AACD,KAFD,MAEO;AACLM,MAAAA,OAAO,CAACC,IAAR,CACE,yEADF;AAGD;;AACD,WAAOL,YAAY,EAAnB;AACD,GATG,CAFa,EAYnB,CAACA,YAAD,CAZmB,CAArB;AAcA,sBACE,oBAAC,QAAD;AAAU,IAAA,QAAQ,EAAEC;AAApB,kBACE,oBAAC,KAAD,OADF,CADF;AAKD,CApBM","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}\n\nexport const WithSkiaWeb = ({ getComponent, fallback }: WithSkiaProps) => {\n  const Inner = useMemo(\n    () =>\n      lazy(async () => {\n        if (Platform.OS === \"web\") {\n          await LoadSkiaWeb();\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]\n  );\n  return (\n    <Suspense fallback={fallback}>\n      <Inner />\n    </Suspense>\n  );\n};\n"]}
+{"version":3,"sources":["WithSkiaWeb.tsx"],"names":["React","useMemo","lazy","Suspense","Platform","LoadSkiaWeb","WithSkiaWeb","getComponent","fallback","opts","Inner","OS","console","warn"],"mappings":"AACA,OAAOA,KAAP,IAAgBC,OAAhB,EAAyBC,IAAzB,EAA+BC,QAA/B,QAA+C,OAA/C;AACA,SAASC,QAAT,QAAyB,cAAzB;AAEA,SAASC,WAAT,QAA4B,eAA5B;AAQA,OAAO,MAAMC,WAAW,GAAG,QAIN;AAAA,MAJO;AAC1BC,IAAAA,YAD0B;AAE1BC,IAAAA,QAF0B;AAG1BC,IAAAA;AAH0B,GAIP;AACnB,QAAMC,KAAK,GAAGT,OAAO,CACnB,mBACEC,IAAI,CAAC,YAAY;AACf,QAAIE,QAAQ,CAACO,EAAT,KAAgB,KAApB,EAA2B;AACzB,YAAMN,WAAW,CAACI,IAAD,CAAjB;AACD,KAFD,MAEO;AACLG,MAAAA,OAAO,CAACC,IAAR,CACE,yEADF;AAGD;;AACD,WAAON,YAAY,EAAnB;AACD,GATG,CAFa,EAYnB,CAACA,YAAD,EAAeE,IAAf,CAZmB,CAArB;AAcA,sBACE,oBAAC,QAAD;AAAU,IAAA,QAAQ,EAAED,QAAF,aAAEA,QAAF,cAAEA,QAAF,GAAc;AAAhC,kBACE,oBAAC,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/typescript/src/renderer/Canvas.d.ts

@@ -3,7 +3,6 @@ import type { RefObject, ReactNode, ComponentProps } from "react";
 import ReactReconciler from "react-reconciler";
 import { SkiaView } from "../views";
 import type { TouchHandler } from "../views";
-import type { SkFontMgr } from "../skia/types";
 import { Container } from "./nodes";
 export declare const skiaReconciler: ReactReconciler.Reconciler<Container, import("./nodes").Node<unknown>, import("./nodes").Node<unknown>, import("./nodes").Node<unknown>, import("./nodes").Node<unknown>>;
 export declare const useCanvasRef: () => React.RefObject<SkiaView>;
@@ -11,6 +10,5 @@ export interface CanvasProps extends ComponentProps<typeof SkiaView> {
     ref?: RefObject<SkiaView>;
     children: ReactNode;
     onTouch?: TouchHandler;
-    fontMgr?: SkFontMgr;
 }
-export declare const Canvas: React.ForwardRefExoticComponent<Pick<CanvasProps, "children" | "mode" | "debug" | "onDraw" | "hitSlop" | "onLayout" | "pointerEvents" | "removeClippedSubviews" | "style" | "testID" | "nativeID" | "collapsable" | "needsOffscreenAlphaCompositing" | "renderToHardwareTextureAndroid" | "focusable" | "shouldRasterizeIOS" | "isTVSelectable" | "hasTVPreferredFocus" | "tvParallaxProperties" | "tvParallaxShiftDistanceX" | "tvParallaxShiftDistanceY" | "tvParallaxTiltAngle" | "tvParallaxMagnification" | "onStartShouldSetResponder" | "onMoveShouldSetResponder" | "onResponderEnd" | "onResponderGrant" | "onResponderReject" | "onResponderMove" | "onResponderRelease" | "onResponderStart" | "onResponderTerminationRequest" | "onResponderTerminate" | "onStartShouldSetResponderCapture" | "onMoveShouldSetResponderCapture" | "onTouchStart" | "onTouchMove" | "onTouchEnd" | "onTouchCancel" | "onTouchEndCapture" | "accessible" | "accessibilityActions" | "accessibilityLabel" | "accessibilityRole" | "accessibilityState" | "accessibilityHint" | "accessibilityValue" | "onAccessibilityAction" | "accessibilityLiveRegion" | "importantForAccessibility" | "accessibilityElementsHidden" | "accessibilityViewIsModal" | "onAccessibilityEscape" | "onAccessibilityTap" | "onMagicTap" | "accessibilityIgnoresInvertColors" | "fontMgr" | "onTouch"> & React.RefAttributes<SkiaView>>;
+export declare const Canvas: React.ForwardRefExoticComponent<Pick<CanvasProps, "children" | "mode" | "debug" | "onDraw" | "hitSlop" | "onLayout" | "pointerEvents" | "removeClippedSubviews" | "style" | "testID" | "nativeID" | "collapsable" | "needsOffscreenAlphaCompositing" | "renderToHardwareTextureAndroid" | "focusable" | "shouldRasterizeIOS" | "isTVSelectable" | "hasTVPreferredFocus" | "tvParallaxProperties" | "tvParallaxShiftDistanceX" | "tvParallaxShiftDistanceY" | "tvParallaxTiltAngle" | "tvParallaxMagnification" | "onStartShouldSetResponder" | "onMoveShouldSetResponder" | "onResponderEnd" | "onResponderGrant" | "onResponderReject" | "onResponderMove" | "onResponderRelease" | "onResponderStart" | "onResponderTerminationRequest" | "onResponderTerminate" | "onStartShouldSetResponderCapture" | "onMoveShouldSetResponderCapture" | "onTouchStart" | "onTouchMove" | "onTouchEnd" | "onTouchCancel" | "onTouchEndCapture" | "accessible" | "accessibilityActions" | "accessibilityLabel" | "accessibilityRole" | "accessibilityState" | "accessibilityHint" | "accessibilityValue" | "onAccessibilityAction" | "accessibilityLiveRegion" | "importantForAccessibility" | "accessibilityElementsHidden" | "accessibilityViewIsModal" | "onAccessibilityEscape" | "onAccessibilityTap" | "onMagicTap" | "accessibilityIgnoresInvertColors" | "onTouch"> & React.RefAttributes<SkiaView>>;

package/lib/typescript/src/renderer/DrawingContext.d.ts

@@ -1,12 +1,11 @@
 import type { RefObject } from "react";
 import type { DrawingInfo, SkiaView } from "../views";
-import type { SkFontMgr, SkCanvas, SkPaint, Skia, Vector } from "../skia/types";
+import type { SkCanvas, SkPaint, Skia, Vector } from "../skia/types";
 export interface DrawingContext extends Omit<DrawingInfo, "touches"> {
     canvas: SkCanvas;
     paint: SkPaint;
     opacity: number;
     center: Vector;
     ref: RefObject<SkiaView>;
-    fontMgr: SkFontMgr;
     Skia: Skia;
 }

package/lib/typescript/src/renderer/processors/Font.d.ts

@@ -1,11 +1,7 @@
-import type { SkFontMgr, SkFont, Skia } from "../../skia/types";
+import type { SkFont } from "../../skia/types";
 export declare type FontDef = {
     font: SkFont;
-} | {
-    familyName: string;
-    size: number;
 };
 export declare const isFont: (fontDef: FontDef) => fontDef is {
     font: SkFont;
 };
-export declare const processFont: (Skia: Skia, fontMgr: SkFontMgr, fontDef: FontDef) => SkFont;

package/lib/typescript/src/skia/core/index.d.ts

@@ -4,9 +4,7 @@ export * from "./Typeface";
 export * from "./Image";
 export * from "./Picture";
 export * from "./SVG";
-export * from "./Path";
 export * from "./Vector";
 export * from "./Rect";
 export * from "./RRect";
 export * from "./Matrix";
-export * from "./Paint";

package/lib/typescript/src/skia/types/Font/Font.d.ts

@@ -24,18 +24,6 @@ export interface SkFont extends SkJSIInstance<"Font"> {
      * @param paint
      */
     getGlyphWidths(glyphs: number[], paint?: SkPaint): number[];
-    /** Returns the advance width of text.
-        The advance is the normal distance to move before drawing additional text.
-        Returns the bounding box of text if bounds is not nullptr. The paint
-        stroke settings, mask filter, or path effect may modify the bounds.
-  
-        @param text        character storage encoded with SkTextEncoding
-        @param byteLength  length of character storage in bytes
-        @param bounds      returns bounding box relative to (0, 0) if not nullptr
-        @param paint       optional; may be nullptr
-        @return            number of glyphs represented by text of length byteLength
-    */
-    measureText: (text: string, paint?: SkPaint) => SkRect;
     /**
      * Returns the FontMetrics for this font.
      */

package/lib/typescript/src/skia/types/Matrix.d.ts

@@ -9,7 +9,7 @@ export declare enum MatrixIndex {
     TransY = 5,
     Persp0 = 6,
     Persp1 = 7,
-    persp2 = 8
+    Persp2 = 8
 }
 export declare const isMatrix: (obj: unknown) => obj is SkMatrix;
 export interface SkMatrix extends SkJSIInstance<"Matrix"> {

package/lib/typescript/src/skia/types/Skia.d.ts

@@ -17,7 +17,6 @@ import type { SkVertices, VertexMode } from "./Vertices/Vertices";
 import type { DataFactory } from "./Data";
 import type { SVGFactory } from "./SVG";
 import type { TextBlobFactory } from "./TextBlob";
-import type { FontMgrFactory } from "./FontMgr/FontMgrFactory";
 import type { SurfaceFactory } from "./Surface";
 import type { SkRSXform } from "./RSXform";
 import type { SkPath } from "./Path/Path";
@@ -62,7 +61,6 @@ export interface Skia {
     Data: DataFactory;
     Image: ImageFactory;
     SVG: SVGFactory;
-    FontMgr: FontMgrFactory;
     TextBlob: TextBlobFactory;
     Surface: SurfaceFactory;
 }

package/lib/typescript/src/skia/types/Typeface/Typeface.d.ts

@@ -1,5 +1,2 @@
 import type { SkJSIInstance } from "../JsiInstance";
-export interface SkTypeface extends SkJSIInstance<"Typeface"> {
-    readonly bold: boolean;
-    readonly italic: boolean;
-}
+export declare type SkTypeface = SkJSIInstance<"Typeface">;

package/lib/typescript/src/skia/types/index.d.ts

@@ -2,7 +2,6 @@ export * from "./Picture";
 export * from "./Data";
 export * from "./SVG";
 export * from "./Surface";
-export * from "./FontMgr";
 export * from "./Vertices";
 export * from "./RuntimeEffect";
 export * from "./Shader";

package/lib/typescript/src/skia/web/JsiSkFont.d.ts

@@ -1,11 +1,10 @@
 import type { CanvasKit, Font } from "canvaskit-wasm";
-import type { FontEdging, FontHinting, SkFont, SkPaint, SkPoint, SkRect, SkTypeface } from "../types";
+import type { FontEdging, FontHinting, SkFont, SkPaint, SkPoint, SkTypeface } from "../types";
 import { HostObject } from "./Host";
 import { JsiSkRect } from "./JsiSkRect";
 import { JsiSkTypeface } from "./JsiSkTypeface";
 export declare class JsiSkFont extends HostObject<Font, "Font"> implements SkFont {
     constructor(CanvasKit: CanvasKit, ref: Font);
-    measureText(_text: string, _paint?: SkPaint): SkRect;
     getTextWidth(text: string, paint?: SkPaint | undefined): number;
     getMetrics(): {
         ascent: number;

package/lib/typescript/src/values/hooks/useComputedValue.d.ts

@@ -6,4 +6,3 @@
  * @returns A readonly value
  */
 export declare const useComputedValue: <R>(cb: () => R, values: unknown[]) => import("..").SkiaValue<R>;
-export declare const useDerivedValue: <R>(cb: () => R, values: unknown[]) => import("..").SkiaValue<R>;

package/lib/typescript/src/views/SkiaView.web.d.ts

@@ -3,10 +3,8 @@ import type { PointerEvent } from "react";
 import type { SkRect } from "../skia/types";
 import type { SkiaValue } from "../values";
 import type { DrawMode, SkiaViewProps } from "./types";
-export declare class SkiaView extends React.Component<SkiaViewProps, {
-    width: number;
-    height: number;
-}> {
+import { TouchType } from "./types";
+export declare class SkiaView extends React.Component<SkiaViewProps> {
     constructor(props: SkiaViewProps);
     private _surface;
     private _unsubscriptions;
@@ -15,10 +13,13 @@ export declare class SkiaView extends React.Component<SkiaViewProps, {
     private _canvasRef;
     private _mode;
     private _redrawRequests;
-    private _unmounted;
+    private width;
+    private height;
+    private requestId;
     private unsubscribeAll;
     private onLayout;
     componentDidMount(): void;
+    componentDidUpdate(): void;
     componentWillUnmount(): void;
     /**
      * Creates a snapshot from the canvas in the surface
@@ -48,9 +49,6 @@ export declare class SkiaView extends React.Component<SkiaViewProps, {
      */
     registerValues(_values: SkiaValue<unknown>[]): void;
     private handleTouchEvent;
-    handleTouchStart(evt: PointerEvent): void;
-    handleTouchMove(evt: PointerEvent): void;
-    handleTouchEnd(evt: PointerEvent): void;
-    handleTouchCancel(evt: PointerEvent): void;
+    createTouchHandler(touchType: TouchType): (evt: PointerEvent) => void;
     render(): JSX.Element;
 }

package/lib/typescript/src/web/LoadSkiaWeb.d.ts

@@ -1,6 +1,6 @@
-import type { CanvasKit as CanvasKitType } from "canvaskit-wasm";
+import type { CanvasKit as CanvasKitType, CanvasKitInitOptions } from "canvaskit-wasm";
 declare global {
     var CanvasKit: CanvasKitType;
 }
-export declare const LoadSkiaWeb: () => Promise<void>;
-export declare const LoadSkia: () => Promise<void>;
+export declare const LoadSkiaWeb: (opts?: CanvasKitInitOptions | undefined) => Promise<void>;
+export declare const LoadSkia: (opts?: CanvasKitInitOptions | undefined) => Promise<void>;

package/lib/typescript/src/web/WithSkiaWeb.d.ts

@@ -1,10 +1,12 @@
 import type { ComponentProps, ComponentType } from "react";
 import { Suspense } from "react";
+import { LoadSkiaWeb } from "./LoadSkiaWeb";
 interface WithSkiaProps {
-    fallback: ComponentProps<typeof Suspense>["fallback"];
+    fallback?: ComponentProps<typeof Suspense>["fallback"];
     getComponent: () => Promise<{
         default: ComponentType;
     }>;
+    opts?: Parameters<typeof LoadSkiaWeb>[0];
 }
-export declare const WithSkiaWeb: ({ getComponent, fallback }: WithSkiaProps) => JSX.Element;
+export declare const WithSkiaWeb: ({ getComponent, fallback, opts, }: WithSkiaProps) => JSX.Element;
 export {};

package/package.json

@@ -7,7 +7,7 @@
     "setup-skia-web": "./scripts/setup-canvaskit.js"
   },
   "title": "React Native Skia",
-  "version": "0.1.137",
+  "version": "0.1.140",
   "description": "High-performance React Native Graphics using Skia",
   "main": "lib/module/index.js",
   "files": [
@@ -69,13 +69,18 @@
     "react-native": ">=0.63.0-rc.0 <1.0.x",
     "react-native-reanimated": ">=2.0.0"
   },
+  "peerDependenciesMeta": {
+    "react-native-reanimated": {
+      "optional": true
+    }
+  },
   "devDependencies": {
     "@types/jest": "^27.0.3",
     "@types/react-native": "^0.65.0",
     "@types/react-reconciler": "^0.26.4",
-    "eslint": "7.32.0",
-    "eslint-config-react-native-wcandillon": "^3.7.2",
-    "eslint-plugin-reanimated": "^1.2.6",
+    "eslint": "8.21.0",
+    "eslint-config-react-native-wcandillon": "3.9.0",
+    "eslint-plugin-reanimated": "2.0.0",
     "jest": "^27.4.3",
     "react": "17.0.2",
     "react-native": "0.66.2",

package/src/mock/index.ts

@@ -52,12 +52,8 @@ export const Mock: typeof SkiaExports &
   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: number, y: number, width: number, height: number) => ({