@shopify/react-native-skia 0.1.137 → 0.1.140

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,21 +57,30 @@ 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.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.JsiSkSurface(CanvasKit, surface);
+      this._canvas = this._surface.getCanvas();
+      this.redraw();
+    }
   }
 
   componentDidMount() {
@@ -77,11 +88,13 @@ class SkiaView extends _react.default.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
@@ -104,26 +117,31 @@ class SkiaView extends _react.default.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() {
@@ -175,20 +193,8 @@ class SkiaView extends _react.default.Component {
     this.redraw();
   }
 
-  handleTouchStart(evt) {
-    this.handleTouchEvent(evt, _types.TouchType.Start);
-  }
-
-  handleTouchMove(evt) {
-    this.handleTouchEvent(evt, _types.TouchType.Active);
-  }
-
-  handleTouchEnd(evt) {
-    this.handleTouchEvent(evt, _types.TouchType.Cancelled);
-  }
-
-  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","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","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.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":["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/views/useTouchHandler.js

@@ -21,7 +21,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;
@@ -39,12 +39,17 @@ const useInternalTouchHandler = function (handlers) {
               x: distX / timeDiffseconds / _reactNative.PixelRatio.get(),
               y: distY / timeDiffseconds / _reactNative.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/commonjs/views/useTouchHandler.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useTouchHandler.ts"],"names":["useInternalTouchHandler","handlers","deps","multiTouch","prevTouchInfoRef","prevVelocityRef","history","forEach","touches","i","length","touch","timeDiffseconds","timestamp","current","id","distX","x","distY","y","type","TouchType","Start","End","Cancelled","PixelRatio","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          }\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":["useInternalTouchHandler","handlers","deps","multiTouch","prevTouchInfoRef","prevVelocityRef","history","forEach","touches","i","length","touch","timeDiffseconds","timestamp","current","id","distX","x","distY","y","type","TouchType","Start","End","Cancelled","PixelRatio","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/commonjs/web/LoadSkiaWeb.js

@@ -11,8 +11,12 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-expect-error
-const LoadSkiaWeb = async () => {
-  const CanvasKit = await (0, _canvaskit.default)(); // The CanvasKit API is stored on the global object and used
+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;

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

@@ -1 +1 @@
-{"version":3,"sources":["LoadSkiaWeb.tsx"],"names":["LoadSkiaWeb","CanvasKit","global","LoadSkia"],"mappings":";;;;;;;AAEA;;;;AAFA;AACA;AAQO,MAAMA,WAAW,GAAG,YAAY;AACrC,QAAMC,SAAS,GAAG,MAAM,yBAAxB,CADqC,CAErC;AACA;;AACAC,EAAAA,MAAM,CAACD,SAAP,GAAmBA,SAAnB;AACD,CALM,C,CAOP;;;;AACO,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":["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

@@ -18,19 +18,20 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 const WithSkiaWeb = _ref => {
   let {
     getComponent,
-    fallback
+    fallback,
+    opts
   } = _ref;
   const Inner = (0, _react.useMemo)(() => /*#__PURE__*/(0, _react.lazy)(async () => {
     if (_reactNative.Platform.OS === "web") {
-      await (0, _LoadSkiaWeb.LoadSkiaWeb)();
+      await (0, _LoadSkiaWeb.LoadSkiaWeb)(opts);
     } else {
       console.warn("<WithSkiaWeb /> is only necessary on web. Consider not using on native.");
     }
 
     return getComponent();
-  }), [getComponent]);
+  }), [getComponent, opts]);
   return /*#__PURE__*/_react.default.createElement(_react.Suspense, {
-    fallback: fallback
+    fallback: fallback !== null && fallback !== void 0 ? fallback : null
   }, /*#__PURE__*/_react.default.createElement(Inner, null));
 };
 

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

@@ -1 +1 @@
-{"version":3,"sources":["WithSkiaWeb.tsx"],"names":["WithSkiaWeb","getComponent","fallback","Inner","Platform","OS","console","warn"],"mappings":";;;;;;;AACA;;AACA;;AAEA;;;;;;AAOO,MAAMA,WAAW,GAAG,QAA+C;AAAA,MAA9C;AAAEC,IAAAA,YAAF;AAAgBC,IAAAA;AAAhB,GAA8C;AACxE,QAAMC,KAAK,GAAG,oBACZ,mBACE,iBAAK,YAAY;AACf,QAAIC,sBAASC,EAAT,KAAgB,KAApB,EAA2B;AACzB,YAAM,+BAAN;AACD,KAFD,MAEO;AACLC,MAAAA,OAAO,CAACC,IAAR,CACE,yEADF;AAGD;;AACD,WAAON,YAAY,EAAnB;AACD,GATD,CAFU,EAYZ,CAACA,YAAD,CAZY,CAAd;AAcA,sBACE,6BAAC,eAAD;AAAU,IAAA,QAAQ,EAAEC;AAApB,kBACE,6BAAC,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":["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/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/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"]}

package/lib/module/renderer/components/text/Text.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";
 const onDraw = createDrawing((_ref, _ref2) => {
   let {
     canvas,
-    paint,
-    fontMgr,
-    Skia
+    paint
   } = _ref;
   let {
     text,
@@ -16,7 +13,9 @@ const onDraw = createDrawing((_ref, _ref2) => {
     y,
     ...fontDef
   } = _ref2;
-  const font = processFont(Skia, fontMgr, fontDef);
+  const {
+    font
+  } = fontDef;
   canvas.drawText(text, x, y, paint, font);
 });
 export const Text = props => {

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

@@ -1 +1 @@
-{"version":3,"sources":["Text.tsx"],"names":["React","createDrawing","processFont","onDraw","canvas","paint","fontMgr","Skia","text","x","y","fontDef","font","drawText","Text","props","defaultProps"],"mappings":";;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AAOA,SAASC,aAAT,QAA8B,qBAA9B;AACA,SAASC,WAAT,QAA4B,kBAA5B;AASA,MAAMC,MAAM,GAAGF,aAAa,CAC1B,iBAAkE;AAAA,MAAjE;AAAEG,IAAAA,MAAF;AAAUC,IAAAA,KAAV;AAAiBC,IAAAA,OAAjB;AAA0BC,IAAAA;AAA1B,GAAiE;AAAA,MAA/B;AAAEC,IAAAA,IAAF;AAAQC,IAAAA,CAAR;AAAWC,IAAAA,CAAX;AAAc,OAAGC;AAAjB,GAA+B;AAChE,QAAMC,IAAI,GAAGV,WAAW,CAACK,IAAD,EAAOD,OAAP,EAAgBK,OAAhB,CAAxB;AACAP,EAAAA,MAAM,CAACS,QAAP,CAAgBL,IAAhB,EAAsBC,CAAtB,EAAyBC,CAAzB,EAA4BL,KAA5B,EAAmCO,IAAnC;AACD,CAJyB,CAA5B;AAOA,OAAO,MAAME,IAAI,GAAIC,KAAD,IAAqC;AACvD,sBAAO;AAAW,IAAA,MAAM,EAAEZ;AAAnB,KAA+BY,KAA/B,EAAP;AACD,CAFM;AAIPD,IAAI,CAACE,YAAL,GAAoB;AAClBP,EAAAA,CAAC,EAAE,CADe;AAElBC,EAAAA,CAAC,EAAE;AAFe,CAApB","sourcesContent":["import React from \"react\";\n\nimport type {\n  CustomPaintProps,\n  AnimatedProps,\n  FontDef,\n} from \"../../processors\";\nimport { createDrawing } from \"../../nodes/Drawing\";\nimport { processFont } from \"../../processors\";\n\ntype TextProps = CustomPaintProps &\n  FontDef & {\n    text: string;\n    x: number;\n    y: number;\n  };\n\nconst onDraw = createDrawing<TextProps>(\n  ({ canvas, paint, fontMgr, Skia }, { text, x, y, ...fontDef }) => {\n    const font = processFont(Skia, fontMgr, fontDef);\n    canvas.drawText(text, x, y, paint, font);\n  }\n);\n\nexport const Text = (props: AnimatedProps<TextProps>) => {\n  return <skDrawing onDraw={onDraw} {...props} />;\n};\n\nText.defaultProps = {\n  x: 0,\n  y: 0,\n};\n"]}
+{"version":3,"sources":["Text.tsx"],"names":["React","createDrawing","onDraw","canvas","paint","text","x","y","fontDef","font","drawText","Text","props","defaultProps"],"mappings":";;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AAOA,SAASC,aAAT,QAA8B,qBAA9B;AASA,MAAMC,MAAM,GAAGD,aAAa,CAC1B,iBAAmD;AAAA,MAAlD;AAAEE,IAAAA,MAAF;AAAUC,IAAAA;AAAV,GAAkD;AAAA,MAA/B;AAAEC,IAAAA,IAAF;AAAQC,IAAAA,CAAR;AAAWC,IAAAA,CAAX;AAAc,OAAGC;AAAjB,GAA+B;AACjD,QAAM;AAAEC,IAAAA;AAAF,MAAWD,OAAjB;AACAL,EAAAA,MAAM,CAACO,QAAP,CAAgBL,IAAhB,EAAsBC,CAAtB,EAAyBC,CAAzB,EAA4BH,KAA5B,EAAmCK,IAAnC;AACD,CAJyB,CAA5B;AAOA,OAAO,MAAME,IAAI,GAAIC,KAAD,IAAqC;AACvD,sBAAO;AAAW,IAAA,MAAM,EAAEV;AAAnB,KAA+BU,KAA/B,EAAP;AACD,CAFM;AAIPD,IAAI,CAACE,YAAL,GAAoB;AAClBP,EAAAA,CAAC,EAAE,CADe;AAElBC,EAAAA,CAAC,EAAE;AAFe,CAApB","sourcesContent":["import React from \"react\";\n\nimport type {\n  CustomPaintProps,\n  AnimatedProps,\n  FontDef,\n} from \"../../processors\";\nimport { createDrawing } from \"../../nodes/Drawing\";\n\ntype TextProps = CustomPaintProps &\n  FontDef & {\n    text: string;\n    x: number;\n    y: number;\n  };\n\nconst onDraw = createDrawing<TextProps>(\n  ({ canvas, paint }, { text, x, y, ...fontDef }) => {\n    const { font } = fontDef;\n    canvas.drawText(text, x, y, paint, font);\n  }\n);\n\nexport const Text = (props: AnimatedProps<TextProps>) => {\n  return <skDrawing onDraw={onDraw} {...props} />;\n};\n\nText.defaultProps = {\n  x: 0,\n  y: 0,\n};\n"]}

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

@@ -2,12 +2,10 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 
 import React from "react";
 import { createDrawing } from "../../nodes";
-import { processFont } from "../../processors/Font";
 const onDraw = createDrawing((_ref, _ref2) => {
   let {
     canvas,
     paint,
-    fontMgr,
     Skia
   } = _ref;
   let {
@@ -22,7 +20,9 @@ const onDraw = createDrawing((_ref, _ref2) => {
     throw new Error("Invalid path: " + pathDef);
   }
 
-  const font = processFont(Skia, fontMgr, fontDef);
+  const {
+    font
+  } = fontDef;
   const ids = font.getGlyphIDs(text);
   const widths = font.getGlyphWidths(ids, paint);
   const rsx = [];