@shopify/react-native-skia 0.1.129 → 0.1.132

package/lib/module/skia/web/JsiSkia.js

@@ -0,0 +1,61 @@
+import { JsiSkPoint } from "./JsiSkPoint";
+import { JsiSkPaint } from "./JsiSkPaint";
+import { JsiSkRect } from "./JsiSkRect";
+import { Color } from "./JsiSkColor";
+import { JsiSkSurfaceFactory } from "./JsiSkSurfaceFactory";
+import { JsiSkRRect } from "./JsiSkRRect";
+import { JsiSkRSXform } from "./JsiSkRSXform";
+import { toValue } from "./Host";
+import { JsiSkContourMeasureIter } from "./JsiSkContourMeasureIter";
+import { JsiSkPictureRecorder } from "./JsiSkPictureRecorder";
+import { JsiSkPictureFactory } from "./JsiSkPictureFactory";
+import { JsiSkPathFactory } from "./JsiSkPathFactory";
+import { JsiSkMatrix } from "./JsiSkMatrix";
+import { JsiSkColorFilterFactory } from "./JsiSkColorFilterFactory";
+import { JsiSkTypefaceFactory } from "./JsiSkTypefaceFactory";
+import { JsiSkMaskFilterFactory } from "./JsiSkMaskFilterFactory";
+import { JsiSkRuntimeEffectFactory } from "./JsiSkRuntimeEffectFactory";
+import { JsiSkImageFilterFactory } from "./JsiImageFilterFactory";
+import { JsiSkShaderFactory } from "./JsiSkShaderFactory";
+import { JsiSkPathEffectFactory } from "./JsiSkPathEffectFactory";
+import { JsiSkDataFactory } from "./JsiSkDataFactory";
+import { JsiSkImageFactory } from "./JsiSkImageFactory";
+import { JsiSkSVGFactory } from "./JsiSkSVGFactory";
+import { JsiSkTextBlobFactory } from "./JsiSkTextBlobFactory";
+import { JsiSkFontMgrFactory } from "./JsiSkFontMgrFactory";
+import { JsiSkFont } from "./JsiSkFont";
+import { MakeVertices } from "./JsiSkVerticesFactory";
+export const JsiSkApi = CanvasKit => ({
+  Point: (x, y) => new JsiSkPoint(CanvasKit, Float32Array.of(x, y)),
+  RuntimeShaderBuilder: _ => {
+    throw new Error("Not implemented on React Native Web");
+  },
+  RRectXY: (rect, rx, ry) => new JsiSkRRect(CanvasKit, CanvasKit.RRectXY(toValue(rect), rx, ry)),
+  RSXform: (scos, ssin, tx, ty) => new JsiSkRSXform(CanvasKit, Float32Array.of(scos, ssin, tx, ty)),
+  Color,
+  ContourMeasureIter: (path, forceClosed, resScale) => new JsiSkContourMeasureIter(CanvasKit, new CanvasKit.ContourMeasureIter(toValue(path), forceClosed, resScale)),
+  Paint: () => new JsiSkPaint(CanvasKit, new CanvasKit.Paint()),
+  PictureRecorder: () => new JsiSkPictureRecorder(CanvasKit, new CanvasKit.PictureRecorder()),
+  Picture: new JsiSkPictureFactory(CanvasKit),
+  Path: new JsiSkPathFactory(CanvasKit),
+  Matrix: matrix => new JsiSkMatrix(CanvasKit, matrix ? Float32Array.of(...matrix) : Float32Array.of(...CanvasKit.Matrix.identity())),
+  ColorFilter: new JsiSkColorFilterFactory(CanvasKit),
+  Font: (typeface, size) => new JsiSkFont(CanvasKit, new CanvasKit.Font(typeface === undefined ? null : toValue(typeface), size)),
+  Typeface: new JsiSkTypefaceFactory(CanvasKit),
+  MaskFilter: new JsiSkMaskFilterFactory(CanvasKit),
+  RuntimeEffect: new JsiSkRuntimeEffectFactory(CanvasKit),
+  ImageFilter: new JsiSkImageFilterFactory(CanvasKit),
+  Shader: new JsiSkShaderFactory(CanvasKit),
+  PathEffect: new JsiSkPathEffectFactory(CanvasKit),
+  MakeVertices: MakeVertices.bind(null, CanvasKit),
+  Data: new JsiSkDataFactory(CanvasKit),
+  Image: new JsiSkImageFactory(CanvasKit),
+  SVG: new JsiSkSVGFactory(CanvasKit),
+  TextBlob: new JsiSkTextBlobFactory(CanvasKit),
+  FontMgr: new JsiSkFontMgrFactory(CanvasKit),
+  XYWHRect: (x, y, width, height) => {
+    return new JsiSkRect(CanvasKit, CanvasKit.XYWHRect(x, y, width, height));
+  },
+  Surface: new JsiSkSurfaceFactory(CanvasKit)
+});
+//# sourceMappingURL=JsiSkia.js.map

package/lib/module/skia/web/JsiSkia.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["JsiSkia.ts"],"names":["JsiSkPoint","JsiSkPaint","JsiSkRect","Color","JsiSkSurfaceFactory","JsiSkRRect","JsiSkRSXform","toValue","JsiSkContourMeasureIter","JsiSkPictureRecorder","JsiSkPictureFactory","JsiSkPathFactory","JsiSkMatrix","JsiSkColorFilterFactory","JsiSkTypefaceFactory","JsiSkMaskFilterFactory","JsiSkRuntimeEffectFactory","JsiSkImageFilterFactory","JsiSkShaderFactory","JsiSkPathEffectFactory","JsiSkDataFactory","JsiSkImageFactory","JsiSkSVGFactory","JsiSkTextBlobFactory","JsiSkFontMgrFactory","JsiSkFont","MakeVertices","JsiSkApi","CanvasKit","Point","x","y","Float32Array","of","RuntimeShaderBuilder","_","Error","RRectXY","rect","rx","ry","RSXform","scos","ssin","tx","ty","ContourMeasureIter","path","forceClosed","resScale","Paint","PictureRecorder","Picture","Path","Matrix","matrix","identity","ColorFilter","Font","typeface","size","undefined","Typeface","MaskFilter","RuntimeEffect","ImageFilter","Shader","PathEffect","bind","Data","Image","SVG","TextBlob","FontMgr","XYWHRect","width","height","Surface"],"mappings":"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","sourcesContent":["import type { CanvasKit } from \"canvaskit-wasm\";\n\nimport type {\n  SkContourMeasureIter,\n  Skia,\n  SkPath,\n  SkRect,\n  SkRuntimeEffect,\n  SkRuntimeShaderBuilder,\n  SkTypeface,\n} from \"../types\";\n\nimport { JsiSkPoint } from \"./JsiSkPoint\";\nimport { JsiSkPaint } from \"./JsiSkPaint\";\nimport { JsiSkRect } from \"./JsiSkRect\";\nimport { Color } from \"./JsiSkColor\";\nimport { JsiSkSurfaceFactory } from \"./JsiSkSurfaceFactory\";\nimport { JsiSkRRect } from \"./JsiSkRRect\";\nimport { JsiSkRSXform } from \"./JsiSkRSXform\";\nimport { toValue } from \"./Host\";\nimport { JsiSkContourMeasureIter } from \"./JsiSkContourMeasureIter\";\nimport { JsiSkPictureRecorder } from \"./JsiSkPictureRecorder\";\nimport { JsiSkPictureFactory } from \"./JsiSkPictureFactory\";\nimport { JsiSkPathFactory } from \"./JsiSkPathFactory\";\nimport { JsiSkMatrix } from \"./JsiSkMatrix\";\nimport { JsiSkColorFilterFactory } from \"./JsiSkColorFilterFactory\";\nimport { JsiSkTypefaceFactory } from \"./JsiSkTypefaceFactory\";\nimport { JsiSkMaskFilterFactory } from \"./JsiSkMaskFilterFactory\";\nimport { JsiSkRuntimeEffectFactory } from \"./JsiSkRuntimeEffectFactory\";\nimport { JsiSkImageFilterFactory } from \"./JsiImageFilterFactory\";\nimport { JsiSkShaderFactory } from \"./JsiSkShaderFactory\";\nimport { JsiSkPathEffectFactory } from \"./JsiSkPathEffectFactory\";\nimport { JsiSkDataFactory } from \"./JsiSkDataFactory\";\nimport { JsiSkImageFactory } from \"./JsiSkImageFactory\";\nimport { JsiSkSVGFactory } from \"./JsiSkSVGFactory\";\nimport { JsiSkTextBlobFactory } from \"./JsiSkTextBlobFactory\";\nimport { JsiSkFontMgrFactory } from \"./JsiSkFontMgrFactory\";\nimport { JsiSkFont } from \"./JsiSkFont\";\nimport { MakeVertices } from \"./JsiSkVerticesFactory\";\n\nexport const JsiSkApi = (CanvasKit: CanvasKit): Skia => ({\n  Point: (x: number, y: number) =>\n    new JsiSkPoint(CanvasKit, Float32Array.of(x, y)),\n  RuntimeShaderBuilder: (_: SkRuntimeEffect): SkRuntimeShaderBuilder => {\n    throw new Error(\"Not implemented on React Native Web\");\n  },\n  RRectXY: (rect: SkRect, rx: number, ry: number) =>\n    new JsiSkRRect(CanvasKit, CanvasKit.RRectXY(toValue(rect), rx, ry)),\n  RSXform: (scos: number, ssin: number, tx: number, ty: number) =>\n    new JsiSkRSXform(CanvasKit, Float32Array.of(scos, ssin, tx, ty)),\n  Color,\n  ContourMeasureIter: (\n    path: SkPath,\n    forceClosed: boolean,\n    resScale: number\n  ): SkContourMeasureIter =>\n    new JsiSkContourMeasureIter(\n      CanvasKit,\n      new CanvasKit.ContourMeasureIter(toValue(path), forceClosed, resScale)\n    ),\n  Paint: () => new JsiSkPaint(CanvasKit, new CanvasKit.Paint()),\n  PictureRecorder: () =>\n    new JsiSkPictureRecorder(CanvasKit, new CanvasKit.PictureRecorder()),\n  Picture: new JsiSkPictureFactory(CanvasKit),\n  Path: new JsiSkPathFactory(CanvasKit),\n  Matrix: (matrix?: number[]) =>\n    new JsiSkMatrix(\n      CanvasKit,\n      matrix\n        ? Float32Array.of(...matrix)\n        : Float32Array.of(...CanvasKit.Matrix.identity())\n    ),\n  ColorFilter: new JsiSkColorFilterFactory(CanvasKit),\n  Font: (typeface?: SkTypeface, size?: number) =>\n    new JsiSkFont(\n      CanvasKit,\n      new CanvasKit.Font(\n        typeface === undefined ? null : toValue(typeface),\n        size\n      )\n    ),\n  Typeface: new JsiSkTypefaceFactory(CanvasKit),\n  MaskFilter: new JsiSkMaskFilterFactory(CanvasKit),\n  RuntimeEffect: new JsiSkRuntimeEffectFactory(CanvasKit),\n  ImageFilter: new JsiSkImageFilterFactory(CanvasKit),\n  Shader: new JsiSkShaderFactory(CanvasKit),\n  PathEffect: new JsiSkPathEffectFactory(CanvasKit),\n  MakeVertices: MakeVertices.bind(null, CanvasKit),\n  Data: new JsiSkDataFactory(CanvasKit),\n  Image: new JsiSkImageFactory(CanvasKit),\n  SVG: new JsiSkSVGFactory(CanvasKit),\n  TextBlob: new JsiSkTextBlobFactory(CanvasKit),\n  FontMgr: new JsiSkFontMgrFactory(CanvasKit),\n  XYWHRect: (x: number, y: number, width: number, height: number) => {\n    return new JsiSkRect(CanvasKit, CanvasKit.XYWHRect(x, y, width, height));\n  },\n  Surface: new JsiSkSurfaceFactory(CanvasKit),\n});\n"]}

package/lib/module/skia/web/index.js

@@ -1,2 +1,2 @@
-export * from "./api";
+export * from "./JsiSkia";
 //# sourceMappingURL=index.js.map

package/lib/module/skia/web/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.ts"],"names":[],"mappings":"AAAA,cAAc,OAAd","sourcesContent":["export * from \"./api\";\n"]}
+{"version":3,"sources":["index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAd","sourcesContent":["export * from \"./JsiSkia\";\n"]}

package/lib/module/values/web/api.js

@@ -10,10 +10,10 @@ export const ValueApi = {
     return new RNSkDerivedValue(cb, values);
   },
   createClockValue: function () {
-    return new RNSkClockValue(requestAnimationFrame);
+    return new RNSkClockValue(requestAnimationFrame.bind(window));
   },
   createAnimation: function (cb) {
-    return new RNSkAnimation(cb, requestAnimationFrame);
+    return new RNSkAnimation(cb, requestAnimationFrame.bind(window));
   }
 };
 //# sourceMappingURL=api.js.map

package/lib/module/values/web/api.js.map

@@ -1 +1 @@
-{"version":3,"sources":["api.ts"],"names":["RNSkAnimation","RNSkClockValue","RNSkDerivedValue","RNSkValue","ValueApi","createValue","initialValue","createDerivedValue","cb","values","createClockValue","requestAnimationFrame","createAnimation"],"mappings":"AASA,SAASA,aAAT,QAA8B,iBAA9B;AACA,SAASC,cAAT,QAA+B,kBAA/B;AACA,SAASC,gBAAT,QAAiC,oBAAjC;AACA,SAASC,SAAT,QAA0B,aAA1B;AAEA,OAAO,MAAMC,QAAuB,GAAG;AACrCC,EAAAA,WAAW,EAAE,UAAaC,YAAb,EAAmD;AAC9D,WAAO,IAAIH,SAAJ,CAAcG,YAAd,CAAP;AACD,GAHoC;AAIrCC,EAAAA,kBAAkB,EAAE,UAClBC,EADkB,EAElBC,MAFkB,EAGJ;AACd,WAAO,IAAIP,gBAAJ,CAAqBM,EAArB,EAAyBC,MAAzB,CAAP;AACD,GAToC;AAUrCC,EAAAA,gBAAgB,EAAE,YAA4B;AAC5C,WAAO,IAAIT,cAAJ,CAAmBU,qBAAnB,CAAP;AACD,GAZoC;AAarCC,EAAAA,eAAe,EAAE,UACfJ,EADe,EAEA;AACf,WAAO,IAAIR,aAAJ,CAAkBQ,EAAlB,EAAsBG,qBAAtB,CAAP;AACD;AAjBoC,CAAhC","sourcesContent":["import type {\n  ISkiaValueApi,\n  SkiaMutableValue,\n  SkiaValue,\n  SkiaClockValue,\n  AnimationState,\n  SkiaAnimation,\n} from \"../types\";\n\nimport { RNSkAnimation } from \"./RNSkAnimation\";\nimport { RNSkClockValue } from \"./RNSkClockValue\";\nimport { RNSkDerivedValue } from \"./RNSkDerivedValue\";\nimport { RNSkValue } from \"./RNSkValue\";\n\nexport const ValueApi: ISkiaValueApi = {\n  createValue: function <T>(initialValue: T): SkiaMutableValue<T> {\n    return new RNSkValue(initialValue);\n  },\n  createDerivedValue: function <R>(\n    cb: () => R,\n    values: SkiaValue<unknown>[]\n  ): SkiaValue<R> {\n    return new RNSkDerivedValue(cb, values);\n  },\n  createClockValue: function (): SkiaClockValue {\n    return new RNSkClockValue(requestAnimationFrame);\n  },\n  createAnimation: function <S extends AnimationState = AnimationState>(\n    cb: (t: number, state: S | undefined) => S\n  ): SkiaAnimation {\n    return new RNSkAnimation(cb, requestAnimationFrame);\n  },\n};\n"]}
+{"version":3,"sources":["api.ts"],"names":["RNSkAnimation","RNSkClockValue","RNSkDerivedValue","RNSkValue","ValueApi","createValue","initialValue","createDerivedValue","cb","values","createClockValue","requestAnimationFrame","bind","window","createAnimation"],"mappings":"AASA,SAASA,aAAT,QAA8B,iBAA9B;AACA,SAASC,cAAT,QAA+B,kBAA/B;AACA,SAASC,gBAAT,QAAiC,oBAAjC;AACA,SAASC,SAAT,QAA0B,aAA1B;AAEA,OAAO,MAAMC,QAAuB,GAAG;AACrCC,EAAAA,WAAW,EAAE,UAAaC,YAAb,EAAmD;AAC9D,WAAO,IAAIH,SAAJ,CAAcG,YAAd,CAAP;AACD,GAHoC;AAIrCC,EAAAA,kBAAkB,EAAE,UAClBC,EADkB,EAElBC,MAFkB,EAGJ;AACd,WAAO,IAAIP,gBAAJ,CAAqBM,EAArB,EAAyBC,MAAzB,CAAP;AACD,GAToC;AAUrCC,EAAAA,gBAAgB,EAAE,YAA4B;AAC5C,WAAO,IAAIT,cAAJ,CAAmBU,qBAAqB,CAACC,IAAtB,CAA2BC,MAA3B,CAAnB,CAAP;AACD,GAZoC;AAarCC,EAAAA,eAAe,EAAE,UACfN,EADe,EAEA;AACf,WAAO,IAAIR,aAAJ,CAAkBQ,EAAlB,EAAsBG,qBAAqB,CAACC,IAAtB,CAA2BC,MAA3B,CAAtB,CAAP;AACD;AAjBoC,CAAhC","sourcesContent":["import type {\n  ISkiaValueApi,\n  SkiaMutableValue,\n  SkiaValue,\n  SkiaClockValue,\n  AnimationState,\n  SkiaAnimation,\n} from \"../types\";\n\nimport { RNSkAnimation } from \"./RNSkAnimation\";\nimport { RNSkClockValue } from \"./RNSkClockValue\";\nimport { RNSkDerivedValue } from \"./RNSkDerivedValue\";\nimport { RNSkValue } from \"./RNSkValue\";\n\nexport const ValueApi: ISkiaValueApi = {\n  createValue: function <T>(initialValue: T): SkiaMutableValue<T> {\n    return new RNSkValue(initialValue);\n  },\n  createDerivedValue: function <R>(\n    cb: () => R,\n    values: SkiaValue<unknown>[]\n  ): SkiaValue<R> {\n    return new RNSkDerivedValue(cb, values);\n  },\n  createClockValue: function (): SkiaClockValue {\n    return new RNSkClockValue(requestAnimationFrame.bind(window));\n  },\n  createAnimation: function <S extends AnimationState = AnimationState>(\n    cb: (t: number, state: S | undefined) => S\n  ): SkiaAnimation {\n    return new RNSkAnimation(cb, requestAnimationFrame.bind(window));\n  },\n};\n"]}

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

@@ -0,0 +1,202 @@
+function _extends() { _extends = Object.assign || 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 { View } from "react-native";
+import { JsiSkSurface } from "../skia/web/JsiSkSurface";
+import { TouchType } from "./types";
+export class SkiaView extends React.Component {
+  constructor(props) {
+    var _props$mode;
+
+    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, "_unmounted", false);
+
+    this.state = {
+      width: -1,
+      height: -1
+    };
+    this._mode = (_props$mode = props.mode) !== null && _props$mode !== void 0 ? _props$mode : "default";
+  }
+
+  unsubscribeAll() {
+    this._unsubscriptions.forEach(u => u());
+
+    this._unsubscriptions = [];
+  }
+
+  onLayout(evt) {
+    this.setState({
+      width: evt.nativeEvent.layout.width,
+      height: evt.nativeEvent.layout.height
+    }); // Reset canvas / surface on layout change
+
+    if (this._canvasRef.current) {
+      // Create surface
+      this._surface = new JsiSkSurface(global.CanvasKit, global.CanvasKit.MakeCanvasSurface(this._canvasRef.current)); // Get canvas and repaint
+
+      if (this._surface) {
+        this._canvas = this._surface.getCanvas();
+        this.requestRedraw();
+        this.redraw();
+      }
+    }
+  }
+
+  componentDidMount() {
+    // Start render loop
+    this.redraw();
+  }
+
+  componentWillUnmount() {
+    this.unsubscribeAll();
+    this._surface = null;
+    this._canvas = null;
+    this._unmounted = true;
+  }
+  /**
+   * 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.
+   */
+
+
+  redraw() {
+    if (this._mode === "continuous" || this._redrawRequests > 0) {
+      this._redrawRequests = 0;
+
+      if (this._canvas && this.props.onDraw && this.state.height !== -1 && this.state.width !== -1) {
+        var _this$_surface2;
+
+        const touches = [...this._touches];
+        this._touches = [];
+        const info = {
+          height: this.state.height,
+          width: this.state.width,
+          timestamp: Date.now(),
+          touches: [touches]
+        };
+        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._unmounted) {
+      requestAnimationFrame(this.redraw.bind(this));
+    }
+  }
+
+  requestRedraw() {
+    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.redraw();
+  }
+  /**
+   * 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.requestRedraw();
+      }));
+    });
+  }
+
+  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.requestRedraw();
+  }
+
+  handleTouchStart(evt) {
+    this.handleTouchEvent(evt, TouchType.Start);
+  }
+
+  handleTouchMove(evt) {
+    this.handleTouchEvent(evt, TouchType.Active);
+  }
+
+  handleTouchEnd(evt) {
+    this.handleTouchEvent(evt, TouchType.Cancelled);
+  }
+
+  handleTouchCancel(evt) {
+    this.handleTouchEvent(evt, TouchType.End);
+  }
+
+  render() {
+    const {
+      mode,
+      debug = false,
+      ...viewProps
+    } = this.props;
+    return /*#__PURE__*/React.createElement(View, _extends({}, viewProps, {
+      onLayout: this.onLayout.bind(this)
+    }), this.state.width > -1 ? /*#__PURE__*/React.createElement("canvas", {
+      ref: this._canvasRef,
+      width: `${this.state.width}px`,
+      height: `${this.state.height}px`,
+      onPointerDown: this.handleTouchStart.bind(this),
+      onPointerMove: this.handleTouchMove.bind(this),
+      onPointerUp: this.handleTouchEnd.bind(this),
+      onPointerCancel: this.handleTouchCancel.bind(this)
+    }) : null);
+  }
+
+}
+//# sourceMappingURL=SkiaView.web.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["SkiaView.web.tsx"],"names":["React","View","JsiSkSurface","TouchType","SkiaView","Component","constructor","props","createRef","state","width","height","_mode","mode","unsubscribeAll","_unsubscriptions","forEach","u","onLayout","evt","setState","nativeEvent","layout","_canvasRef","current","_surface","global","CanvasKit","MakeCanvasSurface","_canvas","getCanvas","requestRedraw","redraw","componentDidMount","componentWillUnmount","_unmounted","makeImageSnapshot","rect","_redrawRequests","onDraw","touches","_touches","info","timestamp","Date","now","ref","flush","requestAnimationFrame","bind","setDrawMode","registerValues","_values","v","push","addListener","handleTouchEvent","touchType","id","pointerId","x","clientX","currentTarget","getClientRects","left","y","clientY","top","force","pressure","type","handleTouchStart","Start","handleTouchMove","Active","handleTouchEnd","Cancelled","handleTouchCancel","End","render","debug","viewProps"],"mappings":"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","sourcesContent":["/* global HTMLCanvasElement */\nimport React from \"react\";\nimport type { PointerEvent } from \"react\";\nimport type { LayoutChangeEvent } from \"react-native\";\nimport { View } from \"react-native\";\n\nimport type { SkRect, SkCanvas } from \"../skia/types\";\nimport type { SkiaValue } from \"../values\";\nimport { JsiSkSurface } from \"../skia/web/JsiSkSurface\";\n\nimport type { DrawingInfo, DrawMode, SkiaViewProps, TouchInfo } from \"./types\";\nimport { TouchType } from \"./types\";\n\nexport class SkiaView extends React.Component<\n  SkiaViewProps,\n  { width: number; height: number }\n> {\n  constructor(props: SkiaViewProps) {\n    super(props);\n    this.state = { width: -1, height: -1 };\n    this._mode = props.mode ?? \"default\";\n  }\n\n  private _surface: JsiSkSurface | null = null;\n  private _unsubscriptions: Array<() => void> = [];\n  private _touches: Array<TouchInfo> = [];\n  private _canvas: SkCanvas | null = null;\n  private _canvasRef: React.RefObject<HTMLCanvasElement> = React.createRef();\n  private _mode: DrawMode;\n  private _redrawRequests = 0;\n  private _unmounted = false;\n\n  private unsubscribeAll() {\n    this._unsubscriptions.forEach((u) => u());\n    this._unsubscriptions = [];\n  }\n\n  private onLayout(evt: LayoutChangeEvent) {\n    this.setState({\n      width: evt.nativeEvent.layout.width,\n      height: evt.nativeEvent.layout.height,\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.MakeCanvasSurface(this._canvasRef.current)!\n      );\n      // Get canvas and repaint\n      if (this._surface) {\n        this._canvas = this._surface.getCanvas();\n        this.requestRedraw();\n        this.redraw();\n      }\n    }\n  }\n\n  componentDidMount() {\n    // Start render loop\n    this.redraw();\n  }\n\n  componentWillUnmount() {\n    this.unsubscribeAll();\n    this._surface = null;\n    this._canvas = null;\n    this._unmounted = true;\n  }\n\n  /**\n   * Creates a snapshot from the canvas in the surface\n   * @param rect Rect to use as bounds. Optional.\n   * @returns An Image object.\n   */\n  public makeImageSnapshot(rect?: SkRect) {\n    return this._surface?.makeImageSnapshot(rect);\n  }\n\n  /**\n   * Sends a redraw request to the native SkiaView.\n   */\n  private redraw() {\n    if (this._mode === \"continuous\" || this._redrawRequests > 0) {\n      this._redrawRequests = 0;\n      if (\n        this._canvas &&\n        this.props.onDraw &&\n        this.state.height !== -1 &&\n        this.state.width !== -1\n      ) {\n        const touches = [...this._touches];\n        this._touches = [];\n        const info: DrawingInfo = {\n          height: this.state.height,\n          width: this.state.width,\n          timestamp: Date.now(),\n          touches: [touches],\n        };\n        this.props.onDraw && this.props.onDraw(this._canvas!, info);\n        this._surface?.ref.flush();\n      }\n    }\n    // Always request a new redraw as long as we're not unmounted\n    if (!this._unmounted) {\n      requestAnimationFrame(this.redraw.bind(this));\n    }\n  }\n\n  public requestRedraw() {\n    this._redrawRequests++;\n  }\n\n  /**\n   * Updates the drawing mode for the skia view. This is the same\n   * as declaratively setting the mode property on the SkiaView.\n   * There are two drawing modes, \"continuous\" and \"default\",\n   * where the continuous mode will continuously redraw the view and\n   * the default mode will only redraw when any of the regular react\n   * properties are changed like size and margins.\n   * @param mode Drawing mode to use.\n   */\n  public setDrawMode(mode: DrawMode) {\n    this._mode = mode;\n    this.redraw();\n  }\n\n  /**\n   * Registers one or move values as a dependant value of the Skia View. The view will\n   * The view will redraw itself when any of the values change.\n   * @param values Values to register\n   */\n  public registerValues(_values: SkiaValue<unknown>[]) {\n    // Unsubscribe from dependency values\n    this.unsubscribeAll();\n    // Register redraw dependencies on values\n    _values.forEach((v) => {\n      this._unsubscriptions.push(\n        v.addListener(() => {\n          this.requestRedraw();\n        })\n      );\n    });\n  }\n\n  private handleTouchEvent(evt: PointerEvent, touchType: TouchType) {\n    this._touches.push({\n      id: evt.pointerId,\n      x: evt.clientX - evt.currentTarget.getClientRects()[0].left,\n      y: evt.clientY - evt.currentTarget.getClientRects()[0].top,\n      force: evt.pressure,\n      type: touchType,\n      timestamp: Date.now(),\n    });\n    this.requestRedraw();\n  }\n\n  handleTouchStart(evt: PointerEvent) {\n    this.handleTouchEvent(evt, TouchType.Start);\n  }\n\n  handleTouchMove(evt: PointerEvent) {\n    this.handleTouchEvent(evt, TouchType.Active);\n  }\n\n  handleTouchEnd(evt: PointerEvent) {\n    this.handleTouchEvent(evt, TouchType.Cancelled);\n  }\n\n  handleTouchCancel(evt: PointerEvent) {\n    this.handleTouchEvent(evt, TouchType.End);\n  }\n\n  render() {\n    const { mode, debug = false, ...viewProps } = this.props;\n    return (\n      <View {...viewProps} onLayout={this.onLayout.bind(this)}>\n        {this.state.width > -1 ? (\n          <canvas\n            ref={this._canvasRef}\n            width={`${this.state.width}px`}\n            height={`${this.state.height}px`}\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        ) : null}\n      </View>\n    );\n  }\n}\n"]}

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

@@ -1 +1 @@
-{"version":3,"sources":["types.ts"],"names":["TouchType"],"mappings":"AAYA,WAAYA,SAAZ;;WAAYA,S;AAAAA,EAAAA,S,CAAAA,S;AAAAA,EAAAA,S,CAAAA,S;AAAAA,EAAAA,S,CAAAA,S;AAAAA,EAAAA,S,CAAAA,S;GAAAA,S,KAAAA,S","sourcesContent":["import type { ViewProps } from \"react-native\";\n\nimport type { SkImage, SkRect, SkCanvas } 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  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  invalidateSkiaView: (nativeId: number) => void;\n  makeImageSnapshot: (nativeId: number, rect?: SkRect) => SkImage;\n  setDrawCallback: (\n    nativeId: number,\n    callback: RNSkiaDrawCallback | undefined\n  ) => void;\n  setDrawMode: (nativeId: number, mode: DrawMode) => void;\n  registerValuesInView: (\n    nativeId: number,\n    values: SkiaValue<unknown>[]\n  ) => () => void;\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"]}
+{"version":3,"sources":["types.ts"],"names":["TouchType"],"mappings":"AAYA,WAAYA,SAAZ;;WAAYA,S;AAAAA,EAAAA,S,CAAAA,S;AAAAA,EAAAA,S,CAAAA,S;AAAAA,EAAAA,S,CAAAA,S;AAAAA,EAAAA,S,CAAAA,S;GAAAA,S,KAAAA,S","sourcesContent":["import type { ViewProps } from \"react-native\";\n\nimport type { SkImage, SkRect, SkCanvas } 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  invalidateSkiaView: (nativeId: number) => void;\n  makeImageSnapshot: (nativeId: number, rect?: SkRect) => SkImage;\n  setDrawCallback: (\n    nativeId: number,\n    callback: RNSkiaDrawCallback | undefined\n  ) => void;\n  setDrawMode: (nativeId: number, mode: DrawMode) => void;\n  registerValuesInView: (\n    nativeId: number,\n    values: SkiaValue<unknown>[]\n  ) => () => void;\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"]}

package/lib/module/views/useTouchHandler.js

@@ -1,64 +1,85 @@
 import { useCallback, useRef } from "react";
 import { PixelRatio } from "react-native";
 import { TouchType } from "./types";
-/**
- * Provides a callback for handling touch events in the Skia View.
- * This touch handler only handles single taps.
- * @param handlers Callbacks for the different touch states
- * @param deps optional Dependency array to update the handlers
- * @returns A function that can be used from within the onDraw callback to
- * update and handle touch events. Call it with the touches property from
- * the info object.
- */
 
-export const useTouchHandler = function (handlers) {
+const useInternalTouchHandler = function (handlers) {
   let deps = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
-  const prevTouchInfoRef = useRef();
-  const prevVelocityRef = useRef({
-    x: 0,
-    y: 0
-  });
+  let multiTouch = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+  const prevTouchInfoRef = useRef({});
+  const prevVelocityRef = useRef({});
   return useCallback(history => {
     // Process all items in the current touch history
     history.forEach(touches => {
-      var _prevTouchInfoRef$cur, _prevTouchInfoRef$cur2, _prevTouchInfoRef$cur3, _prevTouchInfoRef$cur4, _prevTouchInfoRef$cur5, _prevTouchInfoRef$cur6;
-
-      if (touches.length === 0) {
-        return;
-      } // Get the next touch
+      // 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;
 
+        if (!multiTouch && i > 0) {
+          break;
+        }
 
-      const touch = touches[0]; // Calculate the velocity from the previous touch.
+        const touch = touches[i]; // Calculate the velocity from the previous touch.
 
-      const timeDiffseconds = touch.timestamp - ((_prevTouchInfoRef$cur = (_prevTouchInfoRef$cur2 = prevTouchInfoRef.current) === null || _prevTouchInfoRef$cur2 === void 0 ? void 0 : _prevTouchInfoRef$cur2.timestamp) !== null && _prevTouchInfoRef$cur !== void 0 ? _prevTouchInfoRef$cur : touch.timestamp);
-      const distX = touch.x - ((_prevTouchInfoRef$cur3 = (_prevTouchInfoRef$cur4 = prevTouchInfoRef.current) === null || _prevTouchInfoRef$cur4 === void 0 ? void 0 : _prevTouchInfoRef$cur4.x) !== null && _prevTouchInfoRef$cur3 !== void 0 ? _prevTouchInfoRef$cur3 : touch.x);
-      const distY = touch.y - ((_prevTouchInfoRef$cur5 = (_prevTouchInfoRef$cur6 = prevTouchInfoRef.current) === null || _prevTouchInfoRef$cur6 === void 0 ? void 0 : _prevTouchInfoRef$cur6.y) !== null && _prevTouchInfoRef$cur5 !== void 0 ? _prevTouchInfoRef$cur5 : touch.y);
+        const timeDiffseconds = touch.timestamp - ((_prevTouchInfoRef$cur = (_prevTouchInfoRef$cur2 = prevTouchInfoRef.current[touch.id]) === null || _prevTouchInfoRef$cur2 === void 0 ? void 0 : _prevTouchInfoRef$cur2.timestamp) !== null && _prevTouchInfoRef$cur !== void 0 ? _prevTouchInfoRef$cur : touch.timestamp);
+        const distX = touch.x - ((_prevTouchInfoRef$cur3 = (_prevTouchInfoRef$cur4 = prevTouchInfoRef.current[touch.id]) === null || _prevTouchInfoRef$cur4 === void 0 ? void 0 : _prevTouchInfoRef$cur4.x) !== null && _prevTouchInfoRef$cur3 !== void 0 ? _prevTouchInfoRef$cur3 : touch.x);
+        const distY = touch.y - ((_prevTouchInfoRef$cur5 = (_prevTouchInfoRef$cur6 = prevTouchInfoRef.current[touch.id]) === null || _prevTouchInfoRef$cur6 === void 0 ? void 0 : _prevTouchInfoRef$cur6.y) !== null && _prevTouchInfoRef$cur5 !== void 0 ? _prevTouchInfoRef$cur5 : touch.y);
 
-      if (touch.type !== TouchType.Start && touch.type !== TouchType.End && touch.type !== TouchType.Cancelled) {
-        if (timeDiffseconds > 0) {
-          prevVelocityRef.current.x = distX / timeDiffseconds / PixelRatio.get();
-          prevVelocityRef.current.y = distY / timeDiffseconds / PixelRatio.get();
+        if (touch.type !== TouchType.Start && touch.type !== TouchType.End && touch.type !== TouchType.Cancelled) {
+          if (timeDiffseconds > 0) {
+            prevVelocityRef.current[touch.id] = {
+              x: distX / timeDiffseconds / PixelRatio.get(),
+              y: distY / timeDiffseconds / PixelRatio.get()
+            };
+          }
         }
-      }
 
-      const extendedTouchInfo = { ...touch,
-        velocityX: prevVelocityRef.current.x,
-        velocityY: prevVelocityRef.current.y
-      }; // Save previous touch
+        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
+        }; // Save previous touch
 
-      prevTouchInfoRef.current = touch;
+        prevTouchInfoRef.current[touch.id] = touch;
 
-      if (touch.type === TouchType.Start) {
-        prevVelocityRef.current.x = 0;
-        prevVelocityRef.current.y = 0;
-        handlers.onStart && handlers.onStart(touch);
-      } else if (touch.type === TouchType.Active) {
-        handlers.onActive && handlers.onActive(extendedTouchInfo);
-      } else {
-        handlers.onActive && handlers.onActive(extendedTouchInfo);
-        handlers.onEnd && handlers.onEnd(extendedTouchInfo);
+        if (touch.type === TouchType.Start) {
+          delete prevVelocityRef.current[touch.id];
+          handlers.onStart && handlers.onStart(touch);
+        } else if (touch.type === TouchType.Active) {
+          handlers.onActive && handlers.onActive(extendedTouchInfo);
+        } else {
+          handlers.onActive && handlers.onActive(extendedTouchInfo);
+          handlers.onEnd && handlers.onEnd(extendedTouchInfo);
+        }
       }
     }); // eslint-disable-next-line react-hooks/exhaustive-deps
   }, deps);
 };
+/**
+ * Provides a callback for handling touch events in the Skia View.
+ * This touch handler only handles single touches.
+ * @param handlers Callbacks for the different touch states
+ * @param deps optional Dependency array to update the handlers
+ * @returns A function that can be used from within the onDraw callback to
+ * update and handle touch events. Call it with the touches property from
+ * the info object.
+ */
+
+
+export const useTouchHandler = function (handlers) {
+  let deps = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+  return useInternalTouchHandler(handlers, deps, false);
+};
+/**
+ * Provides a callback for handling touch events in the Skia View.
+ * This touch handler handles multiple touches.
+ * @param handlers Callbacks for the different touch states
+ * @param deps optional Dependency array to update the handlers
+ * @returns A function that can be used from within the onDraw callback to
+ * update and handle touch events. Call it with the touches property from
+ * the info object.
+ */
+
+export const useMultiTouchHandler = function (handlers) {
+  let deps = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+  return useInternalTouchHandler(handlers, deps, true);
+};
 //# sourceMappingURL=useTouchHandler.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["useTouchHandler.ts"],"names":["useCallback","useRef","PixelRatio","TouchType","useTouchHandler","handlers","deps","prevTouchInfoRef","prevVelocityRef","x","y","history","forEach","touches","length","touch","timeDiffseconds","timestamp","current","distX","distY","type","Start","End","Cancelled","get","extendedTouchInfo","velocityX","velocityY","onStart","Active","onActive","onEnd"],"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\n/**\n * Provides a callback for handling touch events in the Skia View.\n * This touch handler only handles single taps.\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  const prevTouchInfoRef = useRef<TouchInfo>();\n  const prevVelocityRef = useRef<{ x: number; y: number }>({ x: 0, y: 0 });\n  return useCallback((history: Array<Array<TouchInfo>>) => {\n    // Process all items in the current touch history\n    history.forEach((touches) => {\n      if (touches.length === 0) {\n        return;\n      }\n      // Get the next touch\n      const touch = touches[0];\n\n      // Calculate the velocity from the previous touch.\n      const timeDiffseconds =\n        touch.timestamp -\n        (prevTouchInfoRef.current?.timestamp ?? touch.timestamp);\n\n      const distX = touch.x - (prevTouchInfoRef.current?.x ?? touch.x);\n      const distY = touch.y - (prevTouchInfoRef.current?.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.x =\n            distX / timeDiffseconds / PixelRatio.get();\n          prevVelocityRef.current.y =\n            distY / timeDiffseconds / PixelRatio.get();\n        }\n      }\n\n      const extendedTouchInfo: ExtendedTouchInfo = {\n        ...touch,\n        velocityX: prevVelocityRef.current.x,\n        velocityY: prevVelocityRef.current.y,\n      };\n\n      // Save previous touch\n      prevTouchInfoRef.current = touch;\n\n      if (touch.type === TouchType.Start) {\n        prevVelocityRef.current.x = 0;\n        prevVelocityRef.current.y = 0;\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    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, deps);\n};\n"]}
+{"version":3,"sources":["useTouchHandler.ts"],"names":["useCallback","useRef","PixelRatio","TouchType","useInternalTouchHandler","handlers","deps","multiTouch","prevTouchInfoRef","prevVelocityRef","history","forEach","touches","i","length","touch","timeDiffseconds","timestamp","current","id","distX","x","distY","y","type","Start","End","Cancelled","get","extendedTouchInfo","velocityX","velocityY","onStart","Active","onActive","onEnd","useTouchHandler","useMultiTouchHandler"],"mappings":"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","sourcesContent":["import type { DependencyList } from \"react\";\nimport { useCallback, useRef } from \"react\";\nimport { PixelRatio } from \"react-native\";\n\nimport type {\n  ExtendedTouchInfo,\n  TouchHandlers,\n  TouchHandler,\n  TouchInfo,\n} from \"./types\";\nimport { TouchType } from \"./types\";\n\nconst useInternalTouchHandler = (\n  handlers: TouchHandlers,\n  deps: DependencyList = [],\n  multiTouch = false\n): TouchHandler => {\n  const prevTouchInfoRef = useRef<{ [key: number]: TouchInfo }>({});\n  const prevVelocityRef = useRef<{ [key: number]: { x: number; y: number } }>(\n    {}\n  );\n\n  return useCallback((history: Array<Array<TouchInfo>>) => {\n    // Process all items in the current touch history\n    history.forEach((touches) => {\n      // Enumerate touches\n      for (let i = 0; i < touches.length; i++) {\n        if (!multiTouch && i > 0) {\n          break;\n        }\n\n        const touch = touches[i];\n\n        // Calculate the velocity from the previous touch.\n        const timeDiffseconds =\n          touch.timestamp -\n          (prevTouchInfoRef.current[touch.id]?.timestamp ?? touch.timestamp);\n\n        const distX =\n          touch.x - (prevTouchInfoRef.current[touch.id]?.x ?? touch.x);\n        const distY =\n          touch.y - (prevTouchInfoRef.current[touch.id]?.y ?? touch.y);\n\n        if (\n          touch.type !== TouchType.Start &&\n          touch.type !== TouchType.End &&\n          touch.type !== TouchType.Cancelled\n        ) {\n          if (timeDiffseconds > 0) {\n            prevVelocityRef.current[touch.id] = {\n              x: distX / timeDiffseconds / PixelRatio.get(),\n              y: distY / timeDiffseconds / PixelRatio.get(),\n            };\n          }\n        }\n\n        const extendedTouchInfo: ExtendedTouchInfo = {\n          ...touch,\n          velocityX: prevVelocityRef.current[touch.id]?.x,\n          velocityY: prevVelocityRef.current[touch.id]?.y,\n        };\n\n        // Save previous touch\n        prevTouchInfoRef.current[touch.id] = touch;\n\n        if (touch.type === TouchType.Start) {\n          delete prevVelocityRef.current[touch.id];\n          handlers.onStart && handlers.onStart(touch);\n        } else if (touch.type === TouchType.Active) {\n          handlers.onActive && handlers.onActive(extendedTouchInfo);\n        } else {\n          handlers.onActive && handlers.onActive(extendedTouchInfo);\n          handlers.onEnd && handlers.onEnd(extendedTouchInfo);\n        }\n      }\n    });\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, deps);\n};\n\n/**\n * Provides a callback for handling touch events in the Skia View.\n * This touch handler only handles single touches.\n * @param handlers Callbacks for the different touch states\n * @param deps optional Dependency array to update the handlers\n * @returns A function that can be used from within the onDraw callback to\n * update and handle touch events. Call it with the touches property from\n * the info object.\n */\nexport const useTouchHandler = (\n  handlers: TouchHandlers,\n  deps: DependencyList = []\n): TouchHandler => {\n  return useInternalTouchHandler(handlers, deps, false);\n};\n\n/**\n * Provides a callback for handling touch events in the Skia View.\n * This touch handler handles multiple touches.\n * @param handlers Callbacks for the different touch states\n * @param deps optional Dependency array to update the handlers\n * @returns A function that can be used from within the onDraw callback to\n * update and handle touch events. Call it with the touches property from\n * the info object.\n */\nexport const useMultiTouchHandler = (\n  handlers: TouchHandlers,\n  deps: DependencyList = []\n): TouchHandler => {\n  return useInternalTouchHandler(handlers, deps, true);\n};\n"]}

package/lib/module/web/index.js

@@ -0,0 +1,8 @@
+import CanvasKitInit from "canvaskit-wasm";
+export const LoadSkia = async () => {
+  const CanvasKit = await CanvasKitInit(); // The CanvasKit API is stored on the global object and used
+  // to create the JsiSKApi in the Skia.web.ts file.
+
+  global.CanvasKit = CanvasKit;
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["index.ts"],"names":["CanvasKitInit","LoadSkia","CanvasKit","global"],"mappings":"AAAA,OAAOA,aAAP,MAA0B,gBAA1B;AAOA,OAAO,MAAMC,QAAQ,GAAG,YAAY;AAClC,QAAMC,SAAS,GAAG,MAAMF,aAAa,EAArC,CADkC,CAElC;AACA;;AACAG,EAAAA,MAAM,CAACD,SAAP,GAAmBA,SAAnB;AACD,CALM","sourcesContent":["import CanvasKitInit from \"canvaskit-wasm\";\nimport type { CanvasKit as CanvasKitType } from \"canvaskit-wasm\";\n\ndeclare global {\n  var CanvasKit: CanvasKitType;\n}\n\nexport const LoadSkia = async () => {\n  const CanvasKit = await CanvasKitInit();\n  // The CanvasKit API is stored on the global object and used\n  // to create the JsiSKApi in the Skia.web.ts file.\n  global.CanvasKit = CanvasKit;\n};\n"]}

package/lib/typescript/src/animation/functions/index.d.ts

@@ -1,2 +1,4 @@
-export { interpolate } from "./interpolate";
-export { interpolateColors, mixColors } from "./interpolateColors";
+export * from "./interpolate";
+export * from "./interpolateColors";
+export * from "./interpolateVector";
+export * from "./interpolatePaths";

package/lib/typescript/src/animation/functions/interpolatePaths.d.ts

@@ -0,0 +1,17 @@
+import type { SkPath } from "../../skia/types";
+/**
+ * Maps an input value within a range to an output path within a path range.
+ * @param value - The input value.
+ * @param inputRange - The range of the input value.
+ * @param outputRange - The range of the output path.
+ * @returns The output path.
+ * @example <caption>Map a value between 0 and 1 to a path between two paths.</caption>
+ * const path1 = new Path();
+ * path1.moveTo(0, 0);
+ * path1.lineTo(100, 0);
+ * const path2 = new Path();
+ * path2.moveTo(0, 0);
+ * path2.lineTo(0, 100);
+ * const path = interpolatePath(0.5, [0, 1], [path1, path2]);
+ */
+export declare const interpolatePaths: (value: number, input: number[], outputRange: SkPath[]) => SkPath;

package/lib/typescript/src/animation/functions/interpolateVector.d.ts

@@ -0,0 +1,10 @@
+import type { Vector } from "../../skia/types";
+import { interpolate } from "./interpolate";
+export declare const interpolateVector: (value: number, inputRange: readonly number[], outputRange: readonly Vector[], options?: Parameters<typeof interpolate>[3]) => {
+    x: number;
+    y: number;
+};
+export declare const mixVector: (value: number, from: Vector, to: Vector) => {
+    x: number;
+    y: number;
+};

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

@@ -1,5 +1,6 @@
 import "./skia/NativeSetup";
 export * from "./renderer";
+export * from "./renderer/Canvas";
 export * from "./views";
 export * from "./skia";
 export * from "./external";