@shopify/react-native-skia 0.1.151 → 0.1.152

package/lib/module/views/SkiaView.js

@@ -6,7 +6,7 @@ import React from "react";
 import { requireNativeComponent } from "react-native";
 import { SkiaViewApi } from "./api";
 let SkiaViewNativeId = 1000;
-const NativeSkiaView = requireNativeComponent("ReactNativeSkiaView");
+const NativeSkiaView = requireNativeComponent("SkiaDrawView");
 export class SkiaView extends React.Component {
   constructor(props) {
     super(props);

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

@@ -1 +1 @@
-{"version":3,"names":["React","requireNativeComponent","SkiaViewApi","SkiaViewNativeId","NativeSkiaView","SkiaView","Component","constructor","props","_nativeId","onDraw","assertSkiaViewApi","setJsiProperty","nativeId","componentDidUpdate","prevProps","makeImageSnapshot","rect","redraw","requestRedraw","registerValues","values","registerValuesInView","render","mode","debug","viewProps","callJsiMethod","Error"],"sources":["SkiaView.tsx"],"sourcesContent":["import React from \"react\";\nimport { requireNativeComponent } from \"react-native\";\n\nimport type { SkRect } from \"../skia/types\";\nimport type { SkiaValue } from \"../values\";\n\nimport { SkiaViewApi } from \"./api\";\nimport type { NativeSkiaViewProps, SkiaViewProps } from \"./types\";\n\nlet SkiaViewNativeId = 1000;\n\nconst NativeSkiaView = requireNativeComponent<NativeSkiaViewProps>(\n  \"ReactNativeSkiaView\"\n);\n\nexport class SkiaView extends React.Component<SkiaViewProps> {\n  constructor(props: SkiaViewProps) {\n    super(props);\n    this._nativeId = SkiaViewNativeId++;\n    const { onDraw } = props;\n    if (onDraw) {\n      assertSkiaViewApi();\n      SkiaViewApi.setJsiProperty(this._nativeId, \"drawCallback\", onDraw);\n    }\n  }\n\n  private _nativeId: number;\n\n  public get nativeId() {\n    return this._nativeId;\n  }\n\n  componentDidUpdate(prevProps: SkiaViewProps) {\n    const { onDraw } = this.props;\n    if (onDraw !== prevProps.onDraw) {\n      assertSkiaViewApi();\n      SkiaViewApi.setJsiProperty(this._nativeId, \"drawCallback\", onDraw);\n    }\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    assertSkiaViewApi();\n    return SkiaViewApi.makeImageSnapshot(this._nativeId, rect);\n  }\n\n  /**\n   * Sends a redraw request to the native SkiaView.\n   */\n  public redraw() {\n    assertSkiaViewApi();\n    SkiaViewApi.requestRedraw(this._nativeId);\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>[]): () => void {\n    assertSkiaViewApi();\n    return SkiaViewApi.registerValuesInView(this._nativeId, values);\n  }\n\n  render() {\n    const { mode, debug = false, ...viewProps } = this.props;\n    return (\n      <NativeSkiaView\n        collapsable={false}\n        nativeID={`${this._nativeId}`}\n        mode={mode}\n        debug={debug}\n        {...viewProps}\n      />\n    );\n  }\n}\n\nconst assertSkiaViewApi = () => {\n  if (\n    SkiaViewApi === null ||\n    SkiaViewApi.setJsiProperty === null ||\n    SkiaViewApi.callJsiMethod === null ||\n    SkiaViewApi.registerValuesInView === null ||\n    SkiaViewApi.requestRedraw === null ||\n    SkiaViewApi.makeImageSnapshot === null\n  ) {\n    throw Error(\"Skia View Api was not found.\");\n  }\n};\n"],"mappings":";;;;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,sBAAT,QAAuC,cAAvC;AAKA,SAASC,WAAT,QAA4B,OAA5B;AAGA,IAAIC,gBAAgB,GAAG,IAAvB;AAEA,MAAMC,cAAc,GAAGH,sBAAsB,CAC3C,qBAD2C,CAA7C;AAIA,OAAO,MAAMI,QAAN,SAAuBL,KAAK,CAACM,SAA7B,CAAsD;EAC3DC,WAAW,CAACC,KAAD,EAAuB;IAChC,MAAMA,KAAN;;IADgC;;IAEhC,KAAKC,SAAL,GAAiBN,gBAAgB,EAAjC;IACA,MAAM;MAAEO;IAAF,IAAaF,KAAnB;;IACA,IAAIE,MAAJ,EAAY;MACVC,iBAAiB;MACjBT,WAAW,CAACU,cAAZ,CAA2B,KAAKH,SAAhC,EAA2C,cAA3C,EAA2DC,MAA3D;IACD;EACF;;EAIkB,IAARG,QAAQ,GAAG;IACpB,OAAO,KAAKJ,SAAZ;EACD;;EAEDK,kBAAkB,CAACC,SAAD,EAA2B;IAC3C,MAAM;MAAEL;IAAF,IAAa,KAAKF,KAAxB;;IACA,IAAIE,MAAM,KAAKK,SAAS,CAACL,MAAzB,EAAiC;MAC/BC,iBAAiB;MACjBT,WAAW,CAACU,cAAZ,CAA2B,KAAKH,SAAhC,EAA2C,cAA3C,EAA2DC,MAA3D;IACD;EACF;EAED;AACF;AACA;AACA;AACA;;;EACSM,iBAAiB,CAACC,IAAD,EAAgB;IACtCN,iBAAiB;IACjB,OAAOT,WAAW,CAACc,iBAAZ,CAA8B,KAAKP,SAAnC,EAA8CQ,IAA9C,CAAP;EACD;EAED;AACF;AACA;;;EACSC,MAAM,GAAG;IACdP,iBAAiB;IACjBT,WAAW,CAACiB,aAAZ,CAA0B,KAAKV,SAA/B;EACD;EAED;AACF;AACA;AACA;AACA;;;EACSW,cAAc,CAACC,MAAD,EAA2C;IAC9DV,iBAAiB;IACjB,OAAOT,WAAW,CAACoB,oBAAZ,CAAiC,KAAKb,SAAtC,EAAiDY,MAAjD,CAAP;EACD;;EAEDE,MAAM,GAAG;IACP,MAAM;MAAEC,IAAF;MAAQC,KAAK,GAAG,KAAhB;MAAuB,GAAGC;IAA1B,IAAwC,KAAKlB,KAAnD;IACA,oBACE,oBAAC,cAAD;MACE,WAAW,EAAE,KADf;MAEE,QAAQ,EAAG,GAAE,KAAKC,SAAU,EAF9B;MAGE,IAAI,EAAEe,IAHR;MAIE,KAAK,EAAEC;IAJT,GAKMC,SALN,EADF;EASD;;AAhE0D;;AAmE7D,MAAMf,iBAAiB,GAAG,MAAM;EAC9B,IACET,WAAW,KAAK,IAAhB,IACAA,WAAW,CAACU,cAAZ,KAA+B,IAD/B,IAEAV,WAAW,CAACyB,aAAZ,KAA8B,IAF9B,IAGAzB,WAAW,CAACoB,oBAAZ,KAAqC,IAHrC,IAIApB,WAAW,CAACiB,aAAZ,KAA8B,IAJ9B,IAKAjB,WAAW,CAACc,iBAAZ,KAAkC,IANpC,EAOE;IACA,MAAMY,KAAK,CAAC,8BAAD,CAAX;EACD;AACF,CAXD"}
+{"version":3,"names":["React","requireNativeComponent","SkiaViewApi","SkiaViewNativeId","NativeSkiaView","SkiaView","Component","constructor","props","_nativeId","onDraw","assertSkiaViewApi","setJsiProperty","nativeId","componentDidUpdate","prevProps","makeImageSnapshot","rect","redraw","requestRedraw","registerValues","values","registerValuesInView","render","mode","debug","viewProps","callJsiMethod","Error"],"sources":["SkiaView.tsx"],"sourcesContent":["import React from \"react\";\nimport { requireNativeComponent } from \"react-native\";\n\nimport type { SkRect } from \"../skia/types\";\nimport type { SkiaValue } from \"../values\";\n\nimport { SkiaViewApi } from \"./api\";\nimport type { NativeSkiaViewProps, SkiaDrawViewProps } from \"./types\";\n\nlet SkiaViewNativeId = 1000;\n\nconst NativeSkiaView =\n  requireNativeComponent<NativeSkiaViewProps>(\"SkiaDrawView\");\n\nexport class SkiaView extends React.Component<SkiaDrawViewProps> {\n  constructor(props: SkiaDrawViewProps) {\n    super(props);\n    this._nativeId = SkiaViewNativeId++;\n    const { onDraw } = props;\n    if (onDraw) {\n      assertSkiaViewApi();\n      SkiaViewApi.setJsiProperty(this._nativeId, \"drawCallback\", onDraw);\n    }\n  }\n\n  private _nativeId: number;\n\n  public get nativeId() {\n    return this._nativeId;\n  }\n\n  componentDidUpdate(prevProps: SkiaDrawViewProps) {\n    const { onDraw } = this.props;\n    if (onDraw !== prevProps.onDraw) {\n      assertSkiaViewApi();\n      SkiaViewApi.setJsiProperty(this._nativeId, \"drawCallback\", onDraw);\n    }\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    assertSkiaViewApi();\n    return SkiaViewApi.makeImageSnapshot(this._nativeId, rect);\n  }\n\n  /**\n   * Sends a redraw request to the native SkiaView.\n   */\n  public redraw() {\n    assertSkiaViewApi();\n    SkiaViewApi.requestRedraw(this._nativeId);\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>[]): () => void {\n    assertSkiaViewApi();\n    return SkiaViewApi.registerValuesInView(this._nativeId, values);\n  }\n\n  render() {\n    const { mode, debug = false, ...viewProps } = this.props;\n    return (\n      <NativeSkiaView\n        collapsable={false}\n        nativeID={`${this._nativeId}`}\n        mode={mode}\n        debug={debug}\n        {...viewProps}\n      />\n    );\n  }\n}\n\nconst assertSkiaViewApi = () => {\n  if (\n    SkiaViewApi === null ||\n    SkiaViewApi.setJsiProperty === null ||\n    SkiaViewApi.callJsiMethod === null ||\n    SkiaViewApi.registerValuesInView === null ||\n    SkiaViewApi.requestRedraw === null ||\n    SkiaViewApi.makeImageSnapshot === null\n  ) {\n    throw Error(\"Skia View Api was not found.\");\n  }\n};\n"],"mappings":";;;;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,sBAAT,QAAuC,cAAvC;AAKA,SAASC,WAAT,QAA4B,OAA5B;AAGA,IAAIC,gBAAgB,GAAG,IAAvB;AAEA,MAAMC,cAAc,GAClBH,sBAAsB,CAAsB,cAAtB,CADxB;AAGA,OAAO,MAAMI,QAAN,SAAuBL,KAAK,CAACM,SAA7B,CAA0D;EAC/DC,WAAW,CAACC,KAAD,EAA2B;IACpC,MAAMA,KAAN;;IADoC;;IAEpC,KAAKC,SAAL,GAAiBN,gBAAgB,EAAjC;IACA,MAAM;MAAEO;IAAF,IAAaF,KAAnB;;IACA,IAAIE,MAAJ,EAAY;MACVC,iBAAiB;MACjBT,WAAW,CAACU,cAAZ,CAA2B,KAAKH,SAAhC,EAA2C,cAA3C,EAA2DC,MAA3D;IACD;EACF;;EAIkB,IAARG,QAAQ,GAAG;IACpB,OAAO,KAAKJ,SAAZ;EACD;;EAEDK,kBAAkB,CAACC,SAAD,EAA+B;IAC/C,MAAM;MAAEL;IAAF,IAAa,KAAKF,KAAxB;;IACA,IAAIE,MAAM,KAAKK,SAAS,CAACL,MAAzB,EAAiC;MAC/BC,iBAAiB;MACjBT,WAAW,CAACU,cAAZ,CAA2B,KAAKH,SAAhC,EAA2C,cAA3C,EAA2DC,MAA3D;IACD;EACF;EAED;AACF;AACA;AACA;AACA;;;EACSM,iBAAiB,CAACC,IAAD,EAAgB;IACtCN,iBAAiB;IACjB,OAAOT,WAAW,CAACc,iBAAZ,CAA8B,KAAKP,SAAnC,EAA8CQ,IAA9C,CAAP;EACD;EAED;AACF;AACA;;;EACSC,MAAM,GAAG;IACdP,iBAAiB;IACjBT,WAAW,CAACiB,aAAZ,CAA0B,KAAKV,SAA/B;EACD;EAED;AACF;AACA;AACA;AACA;;;EACSW,cAAc,CAACC,MAAD,EAA2C;IAC9DV,iBAAiB;IACjB,OAAOT,WAAW,CAACoB,oBAAZ,CAAiC,KAAKb,SAAtC,EAAiDY,MAAjD,CAAP;EACD;;EAEDE,MAAM,GAAG;IACP,MAAM;MAAEC,IAAF;MAAQC,KAAK,GAAG,KAAhB;MAAuB,GAAGC;IAA1B,IAAwC,KAAKlB,KAAnD;IACA,oBACE,oBAAC,cAAD;MACE,WAAW,EAAE,KADf;MAEE,QAAQ,EAAG,GAAE,KAAKC,SAAU,EAF9B;MAGE,IAAI,EAAEe,IAHR;MAIE,KAAK,EAAEC;IAJT,GAKMC,SALN,EADF;EASD;;AAhE8D;;AAmEjE,MAAMf,iBAAiB,GAAG,MAAM;EAC9B,IACET,WAAW,KAAK,IAAhB,IACAA,WAAW,CAACU,cAAZ,KAA+B,IAD/B,IAEAV,WAAW,CAACyB,aAAZ,KAA8B,IAF9B,IAGAzB,WAAW,CAACoB,oBAAZ,KAAqC,IAHrC,IAIApB,WAAW,CAACiB,aAAZ,KAA8B,IAJ9B,IAKAjB,WAAW,CAACc,iBAAZ,KAAkC,IANpC,EAOE;IACA,MAAMY,KAAK,CAAC,8BAAD,CAAX;EACD;AACF,CAXD"}

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

@@ -1,208 +1,24 @@
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
-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; }
-
-/* global HTMLCanvasElement */
-import React from "react";
-import { PixelRatio, View } from "react-native";
-import { JsiSkSurface } from "../skia/web/JsiSkSurface";
-import { TouchType } from "./types";
+import { PixelRatio } from "react-native";
+import { SkiaBaseWebView } from "./SkiaBaseWebView";
 const pd = PixelRatio.get();
-export class SkiaView extends React.Component {
+export class SkiaView extends SkiaBaseWebView {
   constructor(props) {
     super(props);
-
-    _defineProperty(this, "_surface", null);
-
-    _defineProperty(this, "_unsubscriptions", []);
-
-    _defineProperty(this, "_touches", []);
-
-    _defineProperty(this, "_canvas", null);
-
-    _defineProperty(this, "_canvasRef", /*#__PURE__*/React.createRef());
-
-    _defineProperty(this, "_mode", void 0);
-
-    _defineProperty(this, "_redrawRequests", 0);
-
-    _defineProperty(this, "width", 0);
-
-    _defineProperty(this, "height", 0);
-
-    _defineProperty(this, "requestId", 0);
-
-    this._mode = props.mode ?? "default";
-  }
-
-  unsubscribeAll() {
-    this._unsubscriptions.forEach(u => u());
-
-    this._unsubscriptions = [];
-  }
-
-  onLayout(evt) {
-    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() {
-    // Start render loop
-    this.tick();
-  }
-
-  componentDidUpdate() {
-    this.redraw();
-  }
-
-  componentWillUnmount() {
-    this.unsubscribeAll();
-    cancelAnimationFrame(this.requestId);
   }
-  /**
-   * Creates a snapshot from the canvas in the surface
-   * @param rect Rect to use as bounds. Optional.
-   * @returns An Image object.
-   */
-
-
-  makeImageSnapshot(rect) {
-    var _this$_surface;
-
-    return (_this$_surface = this._surface) === null || _this$_surface === void 0 ? void 0 : _this$_surface.makeImageSnapshot(rect);
-  }
-  /**
-   * Sends a redraw request to the native SkiaView.
-   */
-
-
-  tick() {
-    if (this._mode === "continuous" || this._redrawRequests > 0) {
-      this._redrawRequests = 0;
 
-      if (this._canvas && this.props.onDraw) {
-        var _this$_surface2;
-
-        const touches = [...this._touches];
-        this._touches = [];
-        const info = {
-          height: this.height,
-          width: this.width,
-          timestamp: Date.now(),
-          touches: touches.map(t => [t])
-        };
-
-        if (this.props.onDraw) {
-          const canvas = this._canvas;
-          canvas.save();
-          canvas.scale(pd, pd);
-          this.props.onDraw(canvas, info);
-          canvas.restore();
-        }
-
-        (_this$_surface2 = this._surface) === null || _this$_surface2 === void 0 ? void 0 : _this$_surface2.ref.flush();
-      }
+  renderInCanvas(canvas, touches) {
+    if (this.props.onDraw) {
+      const info = {
+        height: this.height,
+        width: this.width,
+        timestamp: Date.now(),
+        touches: touches.map(t => [t])
+      };
+      canvas.save();
+      canvas.scale(pd, pd);
+      this.props.onDraw(canvas, info);
+      canvas.restore();
     }
-
-    this.requestId = requestAnimationFrame(this.tick.bind(this));
-  }
-
-  redraw() {
-    this._redrawRequests++;
-  }
-  /**
-   * Updates the drawing mode for the skia view. This is the same
-   * as declaratively setting the mode property on the SkiaView.
-   * There are two drawing modes, "continuous" and "default",
-   * where the continuous mode will continuously redraw the view and
-   * the default mode will only redraw when any of the regular react
-   * properties are changed like size and margins.
-   * @param mode Drawing mode to use.
-   */
-
-
-  setDrawMode(mode) {
-    this._mode = mode;
-    this.tick();
-  }
-  /**
-   * Registers one or move values as a dependant value of the Skia View. The view will
-   * The view will redraw itself when any of the values change.
-   * @param values Values to register
-   */
-
-
-  registerValues(_values) {
-    // Unsubscribe from dependency values
-    this.unsubscribeAll(); // Register redraw dependencies on values
-
-    _values.forEach(v => {
-      this._unsubscriptions.push(v.addListener(() => {
-        this.redraw();
-      }));
-    });
-  }
-
-  handleTouchEvent(evt, touchType) {
-    this._touches.push({
-      id: evt.pointerId,
-      x: evt.clientX - evt.currentTarget.getClientRects()[0].left,
-      y: evt.clientY - evt.currentTarget.getClientRects()[0].top,
-      force: evt.pressure,
-      type: touchType,
-      timestamp: Date.now()
-    });
-
-    this.redraw();
-  }
-
-  createTouchHandler(touchType) {
-    return evt => this.handleTouchEvent(evt, touchType);
-  }
-
-  render() {
-    const {
-      mode,
-      debug = false,
-      ...viewProps
-    } = this.props;
-    return /*#__PURE__*/React.createElement(View, _extends({}, viewProps, {
-      onLayout: this.onLayout.bind(this)
-    }), /*#__PURE__*/React.createElement("canvas", {
-      ref: this._canvasRef,
-      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,"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"],"sources":["SkiaView.web.tsx"],"sourcesContent":["/* global HTMLCanvasElement */\nimport React from \"react\";\nimport type { PointerEvent } from \"react\";\nimport type { LayoutChangeEvent } from \"react-native\";\nimport { PixelRatio, View } from \"react-native\";\n\nimport type { SkRect, SkCanvas } from \"../skia/types\";\nimport type { SkiaValue } from \"../values\";\nimport { JsiSkSurface } from \"../skia/web/JsiSkSurface\";\n\nimport type { 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"],"mappings":"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"}
+{"version":3,"names":["PixelRatio","SkiaBaseWebView","pd","get","SkiaView","constructor","props","renderInCanvas","canvas","touches","onDraw","info","height","width","timestamp","Date","now","map","t","save","scale","restore"],"sources":["SkiaView.web.tsx"],"sourcesContent":["import { PixelRatio } from \"react-native\";\n\nimport type { SkCanvas } from \"../skia/types\";\n\nimport type { DrawingInfo, SkiaDrawViewProps, TouchInfo } from \"./types\";\nimport { SkiaBaseWebView } from \"./SkiaBaseWebView\";\n\nconst pd = PixelRatio.get();\n\nexport class SkiaView extends SkiaBaseWebView<SkiaDrawViewProps> {\n  constructor(props: SkiaDrawViewProps) {\n    super(props);\n  }\n\n  protected renderInCanvas(canvas: SkCanvas, touches: TouchInfo[]): void {\n    if (this.props.onDraw) {\n      const info: DrawingInfo = {\n        height: this.height,\n        width: this.width,\n        timestamp: Date.now(),\n        touches: touches.map((t) => [t]),\n      };\n      canvas.save();\n      canvas.scale(pd, pd);\n      this.props.onDraw(canvas, info);\n      canvas.restore();\n    }\n  }\n}\n"],"mappings":"AAAA,SAASA,UAAT,QAA2B,cAA3B;AAKA,SAASC,eAAT,QAAgC,mBAAhC;AAEA,MAAMC,EAAE,GAAGF,UAAU,CAACG,GAAX,EAAX;AAEA,OAAO,MAAMC,QAAN,SAAuBH,eAAvB,CAA0D;EAC/DI,WAAW,CAACC,KAAD,EAA2B;IACpC,MAAMA,KAAN;EACD;;EAESC,cAAc,CAACC,MAAD,EAAmBC,OAAnB,EAA+C;IACrE,IAAI,KAAKH,KAAL,CAAWI,MAAf,EAAuB;MACrB,MAAMC,IAAiB,GAAG;QACxBC,MAAM,EAAE,KAAKA,MADW;QAExBC,KAAK,EAAE,KAAKA,KAFY;QAGxBC,SAAS,EAAEC,IAAI,CAACC,GAAL,EAHa;QAIxBP,OAAO,EAAEA,OAAO,CAACQ,GAAR,CAAaC,CAAD,IAAO,CAACA,CAAD,CAAnB;MAJe,CAA1B;MAMAV,MAAM,CAACW,IAAP;MACAX,MAAM,CAACY,KAAP,CAAalB,EAAb,EAAiBA,EAAjB;MACA,KAAKI,KAAL,CAAWI,MAAX,CAAkBF,MAAlB,EAA0BG,IAA1B;MACAH,MAAM,CAACa,OAAP;IACD;EACF;;AAlB8D"}

package/lib/module/views/index.js

@@ -1,4 +1,5 @@
 export * from "./SkiaView";
+export * from "./SkiaPictureView";
 export * from "./types";
 export * from "./useDrawCallback";
 export * from "./useTouchHandler";

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

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export * from \"./SkiaView\";\nexport * from \"./types\";\nexport * from \"./useDrawCallback\";\nexport * from \"./useTouchHandler\";\n"],"mappings":"AAAA,cAAc,YAAd;AACA,cAAc,SAAd;AACA,cAAc,mBAAd;AACA,cAAc,mBAAd"}
+{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export * from \"./SkiaView\";\nexport * from \"./SkiaPictureView\";\nexport * from \"./types\";\nexport * from \"./useDrawCallback\";\nexport * from \"./useTouchHandler\";\n"],"mappings":"AAAA,cAAc,YAAd;AACA,cAAc,mBAAd;AACA,cAAc,SAAd;AACA,cAAc,mBAAd;AACA,cAAc,mBAAd"}

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

@@ -1 +1 @@
-{"version":3,"names":["TouchType"],"sources":["types.ts"],"sourcesContent":["import type { ViewProps } from \"react-native\";\n\nimport type { SkCanvas, SkImage, SkRect } from \"../skia/types\";\nimport type { SkiaValue } from \"../values\";\n\nexport type DrawMode = \"continuous\" | \"default\";\n\nexport type NativeSkiaViewProps = ViewProps & {\n  mode?: DrawMode;\n  debug?: boolean;\n};\n\nexport enum TouchType {\n  Start,\n  Active,\n  End,\n  Cancelled,\n}\n\nexport interface TouchInfo {\n  x: number;\n  y: number;\n  force: number;\n  type: TouchType;\n  id: number;\n  timestamp: number;\n}\n\nexport interface DrawingInfo {\n  width: number;\n  height: number;\n  timestamp: number;\n  touches: Array<Array<TouchInfo>>;\n}\n\nexport type ExtendedTouchInfo = TouchInfo & {\n  // points per second\n  velocityX: number;\n  velocityY: number;\n};\n\nexport type TouchHandlers = {\n  onStart?: (touchInfo: TouchInfo) => void;\n  onActive?: (touchInfo: ExtendedTouchInfo) => void;\n  onEnd?: (touchInfo: ExtendedTouchInfo) => void;\n};\n\nexport type TouchHandler = (touchInfo: Array<Array<TouchInfo>>) => void;\n\nexport type RNSkiaDrawCallback = (canvas: SkCanvas, info: DrawingInfo) => void;\n\n/**\n * Listener interface for value changes\n */\nexport interface ValueListener {\n  addListener: (callback: () => void) => number;\n  removeListener: (id: number) => void;\n}\n\nexport interface ISkiaViewApi {\n  setJsiProperty: <T>(nativeId: number, name: string, value: T) => void;\n  callJsiMethod: <T extends Array<unknown>>(\n    nativeId: number,\n    name: string,\n    ...args: T\n  ) => void;\n  registerValuesInView: (\n    nativeId: number,\n    values: SkiaValue<unknown>[]\n  ) => () => void;\n  requestRedraw: (nativeId: number) => void;\n  makeImageSnapshot: (nativeId: number, rect?: SkRect) => SkImage;\n}\n\nexport interface SkiaViewProps extends ViewProps {\n  /**\n   * Sets the drawing mode for the skia view. There are two drawing\n   * modes, \"continuous\" and \"default\", where the continuous mode will\n   * continuously redraw the view, and the default mode will only\n   * redraw when any of the regular react properties are changed like\n   * sizes and margins.\n   */\n  mode?: DrawMode;\n  /**\n   * When set to true the view will display information about the\n   * average time it takes to render.\n   */\n  debug?: boolean;\n  /**\n   * Draw callback. Will be called whenever the view is invalidated and\n   * needs to redraw. This is either caused by a change in a react\n   * property, a touch event, or a call to redraw. If the view is in\n   * continuous mode the callback will be called 60 frames per second\n   * by the native view.\n   */\n  onDraw?: RNSkiaDrawCallback;\n}\n"],"mappings":"AAYA,WAAYA,SAAZ;;WAAYA,S;EAAAA,S,CAAAA,S;EAAAA,S,CAAAA,S;EAAAA,S,CAAAA,S;EAAAA,S,CAAAA,S;GAAAA,S,KAAAA,S"}
+{"version":3,"names":["TouchType"],"sources":["types.ts"],"sourcesContent":["import type { ViewProps } from \"react-native\";\n\nimport type { SkCanvas, SkImage, SkPicture, SkRect } from \"../skia/types\";\nimport type { SkiaValue } from \"../values\";\n\nexport type DrawMode = \"continuous\" | \"default\";\n\nexport type NativeSkiaViewProps = ViewProps & {\n  mode?: DrawMode;\n  debug?: boolean;\n};\n\nexport enum TouchType {\n  Start,\n  Active,\n  End,\n  Cancelled,\n}\n\nexport interface TouchInfo {\n  x: number;\n  y: number;\n  force: number;\n  type: TouchType;\n  id: number;\n  timestamp: number;\n}\n\nexport interface DrawingInfo {\n  width: number;\n  height: number;\n  timestamp: number;\n  touches: Array<Array<TouchInfo>>;\n}\n\nexport type ExtendedTouchInfo = TouchInfo & {\n  // points per second\n  velocityX: number;\n  velocityY: number;\n};\n\nexport type TouchHandlers = {\n  onStart?: (touchInfo: TouchInfo) => void;\n  onActive?: (touchInfo: ExtendedTouchInfo) => void;\n  onEnd?: (touchInfo: ExtendedTouchInfo) => void;\n};\n\nexport type TouchHandler = (touchInfo: Array<Array<TouchInfo>>) => void;\n\nexport type RNSkiaDrawCallback = (canvas: SkCanvas, info: DrawingInfo) => void;\n\n/**\n * Listener interface for value changes\n */\nexport interface ValueListener {\n  addListener: (callback: () => void) => number;\n  removeListener: (id: number) => void;\n}\n\nexport interface ISkiaViewApi {\n  setJsiProperty: <T>(nativeId: number, name: string, value: T) => void;\n  callJsiMethod: <T extends Array<unknown>>(\n    nativeId: number,\n    name: string,\n    ...args: T\n  ) => void;\n  registerValuesInView: (\n    nativeId: number,\n    values: SkiaValue<unknown>[]\n  ) => () => void;\n  requestRedraw: (nativeId: number) => void;\n  makeImageSnapshot: (nativeId: number, rect?: SkRect) => SkImage;\n}\n\nexport interface SkiaBaseViewProps extends ViewProps {\n  /**\n   * Sets the drawing mode for the skia view. There are two drawing\n   * modes, \"continuous\" and \"default\", where the continuous mode will\n   * continuously redraw the view, and the default mode will only\n   * redraw when any of the regular react properties are changed like\n   * sizes and margins.\n   */\n  mode?: DrawMode;\n  /**\n   * When set to true the view will display information about the\n   * average time it takes to render.\n   */\n  debug?: boolean;\n}\n\nexport interface SkiaDrawViewProps extends SkiaBaseViewProps {\n  /**\n   * Draw callback. Will be called whenever the view is invalidated and\n   * needs to redraw. This is either caused by a change in a react\n   * property, a touch event, or a call to redraw. If the view is in\n   * continuous mode the callback will be called 60 frames per second\n   * by the native view.\n   */\n  onDraw?: RNSkiaDrawCallback;\n}\n\nexport interface SkiaPictureViewProps extends SkiaBaseViewProps {\n  picture?: SkPicture;\n}\n"],"mappings":"AAYA,WAAYA,SAAZ;;WAAYA,S;EAAAA,S,CAAAA,S;EAAAA,S,CAAAA,S;EAAAA,S,CAAAA,S;EAAAA,S,CAAAA,S;GAAAA,S,KAAAA,S"}

package/lib/typescript/src/views/SkiaBaseWebView.d.ts

@@ -0,0 +1,58 @@
+import React from "react";
+import type { PointerEvent } from "react";
+import type { SkRect, SkCanvas } from "../skia/types";
+import type { SkiaValue } from "../values";
+import type { DrawMode, SkiaBaseViewProps, TouchInfo } from "./types";
+import { TouchType } from "./types";
+export declare abstract class SkiaBaseWebView<TProps extends SkiaBaseViewProps> extends React.Component<TProps> {
+    constructor(props: TProps);
+    private _surface;
+    private _unsubscriptions;
+    private _touches;
+    private _canvas;
+    private _canvasRef;
+    private _mode;
+    private _redrawRequests;
+    private requestId;
+    protected width: number;
+    protected height: number;
+    private unsubscribeAll;
+    private onLayout;
+    componentDidMount(): void;
+    componentDidUpdate(): void;
+    componentWillUnmount(): void;
+    /**
+     * Creates a snapshot from the canvas in the surface
+     * @param rect Rect to use as bounds. Optional.
+     * @returns An Image object.
+     */
+    makeImageSnapshot(rect?: SkRect): import("../skia/types").SkImage | undefined;
+    /**
+     * Override to render
+     */
+    protected abstract renderInCanvas(canvas: SkCanvas, touches: TouchInfo[]): void;
+    /**
+     * Sends a redraw request to the native SkiaView.
+     */
+    private tick;
+    redraw(): void;
+    /**
+     * Updates the drawing mode for the skia view. This is the same
+     * as declaratively setting the mode property on the SkiaView.
+     * There are two drawing modes, "continuous" and "default",
+     * where the continuous mode will continuously redraw the view and
+     * the default mode will only redraw when any of the regular react
+     * properties are changed like size and margins.
+     * @param mode Drawing mode to use.
+     */
+    setDrawMode(mode: DrawMode): void;
+    /**
+     * Registers one or move values as a dependant value of the Skia View. The view will
+     * The view will redraw itself when any of the values change.
+     * @param values Values to register
+     */
+    registerValues(_values: SkiaValue<unknown>[]): void;
+    private handleTouchEvent;
+    createTouchHandler(touchType: TouchType): (evt: PointerEvent) => void;
+    render(): JSX.Element;
+}

package/lib/typescript/src/views/SkiaPictureView.d.ts

@@ -0,0 +1,27 @@
+import React from "react";
+import type { SkRect } from "../skia/types";
+import type { SkiaValue } from "../values";
+import type { SkiaPictureViewProps } from "./types";
+export declare class SkiaPictureView extends React.Component<SkiaPictureViewProps> {
+    constructor(props: SkiaPictureViewProps);
+    private _nativeId;
+    get nativeId(): number;
+    componentDidUpdate(prevProps: SkiaPictureViewProps): void;
+    /**
+     * Creates a snapshot from the canvas in the surface
+     * @param rect Rect to use as bounds. Optional.
+     * @returns An Image object.
+     */
+    makeImageSnapshot(rect?: SkRect): import("../skia/types").SkImage;
+    /**
+     * Sends a redraw request to the native SkiaView.
+     */
+    redraw(): void;
+    /**
+     * Registers one or move values as a dependant value of the Skia View. The view will
+     * The view will redraw itself when any of the values change.
+     * @param values Values to register
+     */
+    registerValues(values: SkiaValue<unknown>[]): () => void;
+    render(): JSX.Element;
+}

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

@@ -0,0 +1,7 @@
+import type { SkCanvas } from "../skia/types";
+import type { SkiaPictureViewProps } from "./types";
+import { SkiaBaseWebView } from "./SkiaBaseWebView";
+export declare class SkiaPictureView extends SkiaBaseWebView<SkiaPictureViewProps> {
+    constructor(props: SkiaPictureViewProps);
+    protected renderInCanvas(canvas: SkCanvas): void;
+}

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

@@ -1,12 +1,12 @@
 import React from "react";
 import type { SkRect } from "../skia/types";
 import type { SkiaValue } from "../values";
-import type { SkiaViewProps } from "./types";
-export declare class SkiaView extends React.Component<SkiaViewProps> {
-    constructor(props: SkiaViewProps);
+import type { SkiaDrawViewProps } from "./types";
+export declare class SkiaView extends React.Component<SkiaDrawViewProps> {
+    constructor(props: SkiaDrawViewProps);
     private _nativeId;
     get nativeId(): number;
-    componentDidUpdate(prevProps: SkiaViewProps): void;
+    componentDidUpdate(prevProps: SkiaDrawViewProps): void;
     /**
      * Creates a snapshot from the canvas in the surface
      * @param rect Rect to use as bounds. Optional.

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

@@ -1,54 +1,7 @@
-import React from "react";
-import type { PointerEvent } from "react";
-import type { SkRect } from "../skia/types";
-import type { SkiaValue } from "../values";
-import type { DrawMode, SkiaViewProps } from "./types";
-import { TouchType } from "./types";
-export declare class SkiaView extends React.Component<SkiaViewProps> {
-    constructor(props: SkiaViewProps);
-    private _surface;
-    private _unsubscriptions;
-    private _touches;
-    private _canvas;
-    private _canvasRef;
-    private _mode;
-    private _redrawRequests;
-    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
-     * @param rect Rect to use as bounds. Optional.
-     * @returns An Image object.
-     */
-    makeImageSnapshot(rect?: SkRect): import("../skia/types").SkImage | undefined;
-    /**
-     * Sends a redraw request to the native SkiaView.
-     */
-    private tick;
-    redraw(): void;
-    /**
-     * Updates the drawing mode for the skia view. This is the same
-     * as declaratively setting the mode property on the SkiaView.
-     * There are two drawing modes, "continuous" and "default",
-     * where the continuous mode will continuously redraw the view and
-     * the default mode will only redraw when any of the regular react
-     * properties are changed like size and margins.
-     * @param mode Drawing mode to use.
-     */
-    setDrawMode(mode: DrawMode): void;
-    /**
-     * Registers one or move values as a dependant value of the Skia View. The view will
-     * The view will redraw itself when any of the values change.
-     * @param values Values to register
-     */
-    registerValues(_values: SkiaValue<unknown>[]): void;
-    private handleTouchEvent;
-    createTouchHandler(touchType: TouchType): (evt: PointerEvent) => void;
-    render(): JSX.Element;
+import type { SkCanvas } from "../skia/types";
+import type { SkiaDrawViewProps, TouchInfo } from "./types";
+import { SkiaBaseWebView } from "./SkiaBaseWebView";
+export declare class SkiaView extends SkiaBaseWebView<SkiaDrawViewProps> {
+    constructor(props: SkiaDrawViewProps);
+    protected renderInCanvas(canvas: SkCanvas, touches: TouchInfo[]): void;
 }

package/lib/typescript/src/views/index.d.ts

@@ -1,4 +1,5 @@
 export * from "./SkiaView";
+export * from "./SkiaPictureView";
 export * from "./types";
 export * from "./useDrawCallback";
 export * from "./useTouchHandler";

package/lib/typescript/src/views/types.d.ts

@@ -1,5 +1,5 @@
 import type { ViewProps } from "react-native";
-import type { SkCanvas, SkImage, SkRect } from "../skia/types";
+import type { SkCanvas, SkImage, SkPicture, SkRect } from "../skia/types";
 import type { SkiaValue } from "../values";
 export declare type DrawMode = "continuous" | "default";
 export declare type NativeSkiaViewProps = ViewProps & {
@@ -51,7 +51,7 @@ export interface ISkiaViewApi {
     requestRedraw: (nativeId: number) => void;
     makeImageSnapshot: (nativeId: number, rect?: SkRect) => SkImage;
 }
-export interface SkiaViewProps extends ViewProps {
+export interface SkiaBaseViewProps extends ViewProps {
     /**
      * Sets the drawing mode for the skia view. There are two drawing
      * modes, "continuous" and "default", where the continuous mode will
@@ -65,6 +65,8 @@ export interface SkiaViewProps extends ViewProps {
      * average time it takes to render.
      */
     debug?: boolean;
+}
+export interface SkiaDrawViewProps extends SkiaBaseViewProps {
     /**
      * Draw callback. Will be called whenever the view is invalidated and
      * needs to redraw. This is either caused by a change in a react
@@ -74,3 +76,6 @@ export interface SkiaViewProps extends ViewProps {
      */
     onDraw?: RNSkiaDrawCallback;
 }
+export interface SkiaPictureViewProps extends SkiaBaseViewProps {
+    picture?: SkPicture;
+}

package/package.json

@@ -7,7 +7,7 @@
     "setup-skia-web": "./scripts/setup-canvaskit.js"
   },
   "title": "React Native Skia",
-  "version": "0.1.151",
+  "version": "0.1.152",
   "description": "High-performance React Native Graphics using Skia",
   "main": "lib/module/index.js",
   "files": [